這是之前面試的時候面試官提問的一道面試題。

具體題目是：為什么表單提交不會出現(xiàn)跨域，而使用 Ajax 發(fā)送 post 請求時卻會出現(xiàn)跨域的情況。

那什么情況下會出現(xiàn)跨域：

協(xié)議 + 域名 + 端口 三者只要有一個不一樣，就會出現(xiàn)跨域。

那為什么表單能夠跨域發(fā)送請求，而 Ajax 卻不能發(fā)送跨域請求

• 歸根結(jié)底：跨域是為了阻止用戶讀取到另一個域名下的內(nèi)容

• 而 Ajax 可以獲取響應，但瀏覽器認為這不安全，所以攔截了響應

• 但是表單并不會獲取新的內(nèi)容，所以可以發(fā)起跨域請求。

前者是發(fā)送跨域請求給到后端，并不去接收服務器返回的信息

后者是發(fā)送跨域請求給到后端，并接收服務器返回的信息

那該如何解決跨域

#方法一：使用 JSONP

原理是利用<script>標簽的跨域特性，可以不受限制地從其他域中加載資源

js
代碼解讀
復制代碼
function jsonp(options) {    var script = document.createElement('script');        // 參數(shù)處理    var params = '';    for (var attr in options.data) {        params += '&' + attr + '=' + options.data[attr];    }         // 設置回調(diào)函數(shù)    var successCallback =  `successCallback`;    window[successCallback] = options.success;        script.src = options.url + '?callback=' + successCallback + params;    document.body.appendChild(script);}

代碼解釋：

請求成功后，前端得執(zhí)行回調(diào)函數(shù)，但 script 腳本是執(zhí)行不到 success() 方法的。

這是因為 success() 方法 并不是 全局函數(shù)，所以需要將 success() 方法 改成全局函數(shù)

js
代碼解讀
復制代碼
var successCallback =  `successCallback`;window[successCallback] = options.success;

并在請求參數(shù)的基礎上，需要添加 callback 參數(shù)，值對應需要回調(diào)的函數(shù)名

js
代碼解讀
復制代碼
script.src = options.url + '?callback=' + successCallback + params;

使用：

js
代碼解讀
復制代碼
var btn = document.getElementById('btn');btn.addEventListener('click', function() {    jsonp({        url: 'http://localhost:3001/getUserInfo',        data: { name: '浩浩' },        success: function(data) {            alert('UserInfo:' + JSON.stringify(data));        }    })});

JSONP 優(yōu)缺點

• 簡單兼容性好，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題

• 僅支持get方法具有局限性,不安全可能會遭受 XSS 攻擊

---

#方法二：CORS

CORS 是一個 W3C 標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。 CORS 需要瀏覽器和服務器同時支持。但是目前基本上瀏覽器都支持，所以我們只要保證服務器端服務器實現(xiàn)了 CORS 接口，就可以跨源通信。

后端解決跨域問題，就是在服務器端給響應添加頭信息

Name	Required	Comments
Access-Control-Allow-Origin	必填	允許請求的域
Access-Control-Allow-Methods	必填	允許請求的方法
Access-Control-Allow-Headers	可選	預檢請求后，告知發(fā)送請求需要有的頭部
Access-Control-Allow-Credentials	可選	表示是否允許發(fā)送cookie，默認false；
Access-Control-Max-Age	可選	本次預檢的有效期，單位：秒；

在 node 上處理

js
代碼解讀
復制代碼
// 方式一const Koa = require('koa')const app = new Koa()app.all("*", (req, res, next) => {    res.header("Access-Control-Allow-Origin", "*");    res.header("Access-Control-Allow-Headers", "content-type");        // 關鍵點    next()})

js
代碼解讀
復制代碼
// 方式二const Koa = require('koa')const app = new Koa()app.all("*", (req, res, next) => {    // 設置域名跨域    res.header("Access-Control-Allow-Origin", "http://127.0.0.1");    // 跨域允許的請求方式    res.header("Access-Control-Allow-Headers", "DELETE,PUT,POST,GET,OPTIONS");        // 關鍵點    next()})

在 Nginx 上處理

js
代碼解讀
復制代碼
location /example {  add_header Access-Control-Allow-Origin *;  add_header Access-Control-Allow-Methods *;  # add_header Access-Control-Allow-Methods GET,POST,OPTIONS;}