實際上，cors和jsonp都是用于解決跨域問題，當兩個頁面的協議、域名、端口號中有一個不一致時就存在了跨域，一旦出現跨域，瀏覽器發送跨域請求后，請求回來的數據都會被瀏覽器所攔截，準備一張圖給大家看看：
什么是JSONP(???)
JSONP (JSON with Padding) 是 JSON 的一種“使用模式”，可用于解決主流瀏覽器的跨域數據訪問的問題。
JSONP的實現原理(???)
-
概念：瀏覽器端通過 <script> 標簽的 src 屬性，請求服務器上的數據，同時，服務器返回一個函數的調用。這種請求數據的方式叫做 JSONP
-
特點：
JSONP 不屬于真正的 Ajax 請求，因為它沒有使用 XMLHttpRequest 這個對象
JSONP 僅支持 GET 請求，不支持 POST、PUT、DELETE 等請求
什么是CORS(?????)
-
CORS (跨域資源共享) 由一系列 HTTP 響應頭組成，這些 HTTP 響應頭決定瀏覽器 是否阻止前端 JS 代碼跨域獲取資源
-
瀏覽器的同源安全策略默認會阻止網頁“跨域”獲取資源。但如果接口服務器配置了 CORS 相關的 HTTP 響應頭，就可以解除瀏覽器端的跨域訪問限制
下面分別向大家演示通過CORS和JSONP實現跨域的案例：
一、通過CORS中間件解決跨域問題 ：
index.html文件代碼演示：
-
-
-
-
-
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-
<script src="jquery.min.js"></script>
-
-
-
-
<button class="get">get請求</button>
-
<button class="post">post請求</button>
-
-
$('.get').on('click', function() {
-
-
-
url: 'http://127.0.0.1/api/get?name=hua&age=18',
-
-
-
-
-
-
$('.post').on('click', function() {
-
-
-
url: 'http://127.0.0.1/api/post',
-
-
-
-
-
-
-
-
-
-
-
-
-
此時會出現跨域問題，我們需要使用 cors 中間件解決跨域問題
-
cors 是 Express 的一個第三方中間件。通過安裝和配置 cors 中間件，可以很方便地解決跨域問題
-
使用步驟
-
express接口案例代碼
-
-
const express = require('express')
-
-
-
-
-
-
const cors = require('cors')
-
-
-
-
-
app.use(express.urlencoded({ extended: false }))
-
-
-
const router = require('./apiRouter')
-
-
-
-
-
-
console.log('http://127.0.0.1')
-
apiRouter路由文件代碼：
-
const express = require('express');
-
const router = express.Router();
-
-
router.get('/get', (req, res) => {
-
-
-
-
-
-
-
-
router.post('/post', (req, res) => {
-
-
-
-
-
-
-
-
在終端中運行express接口代碼后打開index.html文件并點擊get及post按鈕得到請求結果：
二、通過JSONP中間件解決跨域問題 ：
創建 JSONP 接口的注意事項
-
如果項目中已經配置了 CORS 跨域資源共享，為了防止沖突，必須在配置 CORS 中間件之前聲明 JSONP 的接口
否則 JSONP 接口會被處理成開啟了 CORS 的接口
-
實現步驟：
（1）獲取客戶端發送過來的回調函數的名字
（2）得到要通過 JSONP 形式發送給客戶端的數據
（3）根據前兩步得到的數據，拼接出一個函數調用的字符串
（4）把上一步拼接得到的字符串，響應給客戶端的 <script> 標簽進行解析執行
案例代碼如下：
-
-
const express = require('express');
-
-
-
-
app.get('/jsonp', (req, res) => {
-
-
const { callback } = req.query
-
-
-
-
-
-
-
res.send(`${callback}(${JSON.stringify(obj)})`)
-
-
-
console.log('http://127.0.0.1');
-
創建jsonp.html客戶端來接收服務器端響應過來的回調函數，代碼如下：
url中callback=fn為客戶端發送請求攜帶的參數 既服務器端中的req.query.callback
-
-
-
-
-
-
<script src="http://127.0.0.1/jsonp?callback=fn"></script>
