關於前端跨域這個老生長談的問題，解決方案也是鋪天蓋地，但大家是否真正從原理上到實踐已經完全掌握了呢？小郭今天將總結所有的跨域解決方案，讓你在面試中收穫滿分。
本文將從跨域場景到跨域方案逐一說明，重點突出最常用跨域方案，讓你工作開發不用愁。
由於本文涉及篇幅較長（建議先收藏），因此分上下集講述，力爭把最全面的跨域問題分享給大家。
上文主要介紹關於跨域概念、原理及五種跨域方案，現做簡單回顧：
回顧
跨域：指一個域下的文檔或腳本試圖去請求另一個域下的資源，由於瀏覽器同源策略限制而產生。
方案：通過jsonp跨域；document.domain + iframe；跨域location.hash + iframe；window.name + iframe跨域；postMessage跨域跨域資源共享（CORS)
本文繼續介紹跨域解決方案，重點解決方案都藏在文章裡，要仔細閱讀哦（敲桌子...）！
方案
方案一：CORS（跨域資源共享）
普通跨域請求：只服務端設置
Access-Control-Allow-Origin即可，前端無須設置，若要帶cookie請求：前後端都需要設置。需注意的是：由於同源策略的限制，所讀取的cookie為跨域請求接口所在域的cookie，而非當前頁。
使用方法：
前端配置：<code>/* * 原生ajax */ var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容 // 前端設置是否帶cookie xhr.withCredentials = true; xhr.open('post', 'http://www.domain2.com:8080/login', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('user=admin'); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); } }; /* * Jquery ajax */ $.ajax({ ... xhrFields: { withCredentials: true // 前端設置是否帶cookie }, crossDomain: true, // 會讓請求頭中包含跨域的額外信息，但不會含cookie ... }); /* * axios 設置 */ axios.defaults.withCredentials = true/<code>服務端設置
<code>/* * Java 設置 * 導入包：import javax.servlet.http.HttpServletResponse; * 接口參數中定義：HttpServletResponse response */ // 允許跨域訪問的域名：若有端口需寫全（協議+域名+端口），若沒有端口末尾不用加'/' response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); // 允許前端帶認證cookie：啟用此項後，上面的域名不能為'*'，必須指定具體的域名，否則瀏覽器會提示 response.setHeader("Access-Control-Allow-Credentials", "true"); // 提示OPTIONS預檢時，後端需要設置的兩個常用自定義頭 response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With"); /* * node 設置 */ var http = require('http'); var server = http.createServer(); var qs = require('querystring'); server.on('request', function(req, res) { var postData = ''; // 數據塊接收中 req.addListener('data', function(chunk) { postData += chunk; }); // 數據接收完畢 req.addListener('end', function() { postData = qs.parse(postData); // 跨域後臺設置 res.writeHead(200, { 'Access-Control-Allow-Credentials': 'true', // 後端允許發送Cookie 'Access-Control-Allow-Origin': 'http://www.domain1.com', // 允許訪問的域（協議+域名+端口） /* * 此處設置的cookie還是domain2的而非domain1，因為後端也不能跨域寫cookie(nginx反向代理可以實現)， * 但只要domain2中寫入一次cookie認證，後面的跨域接口都能從domain2中獲取cookie，從而實現所有的接口都能跨域訪問 */ 'Set-Cookie': 'l=ab123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly的作用是讓js無法讀取cookie }); res.write(JSON.stringify(postData)); res.end(); }); }); server.listen('3000'); console.log('Server is running at port 3000...');/<code>
目前，所有瀏覽器都支持該功能，CORS也已經成為主流的跨域解決方案, 推薦。
方案二：Nginx代理
Nginx反向代理處理前端跨域問題是最熱門的解決方案。接下來我們詳細瞭解一下如何通過Nginx解決跨域問題。
iconfont跨域：瀏覽器跨域訪問js、css、img等常規靜態資源被同源策略許可，但iconfont字體文件(eot|otf|ttf|woff|svg)例外，此時可在nginx的靜態資源服務器中加入以下配置。接口跨域：同源策略是瀏覽器的安全策略，不是HTTP協議的一部分。服務器端調用HTTP接口只是使用HTTP協議，不會執行JS腳本，不需要同源策略，也就不存在跨越問題。實現思路：通過nginx配置一個代理服務器（域名與domain1相同，端口不同）做跳板機，反向代理訪問domain2接口，並且可以順便修改cookie中domain信息，方便當前域cookie寫入，實現跨域登錄。
代理跨域
Nginx配置
<code>#proxy服務器 server { listen 80; server_name www.domain1.com; location / { proxy_pass http://www.domain2.com:8080; #反向代理 proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie裡域名 index index.html index.htm; # 當用webpack-dev-server等中間件代理接口訪問nignx時，此時無瀏覽器參與，故沒有同源限制，下面的跨域配置可不啟用 add_header Access-Control-Allow-Origin http://www.domain1.com; #當前端只跨域不帶cookie時，可為* add_header Access-Control-Allow-Credentials true; } }/<code>
前端設置
<code>var xhr = new XMLHttpRequest(); // 前端開關：瀏覽器是否讀寫cookie xhr.withCredentials = true; // 訪問nginx中的代理服務器 xhr.open('get', 'http://www.domain1.com:81/?user=admin', true); xhr.send();/<code>
node 服務端設置
<code>var http = require('http'); var server = http.createServer(); var qs = require('querystring'); server.on('request', function(req, res) { var params = qs.parse(req.url.substring(2)); // 向前臺寫cookie res.writeHead(200, { 'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:腳本無法讀取 }); res.write(JSON.stringify(params)); res.end(); }); server.listen('8080'); console.log('Server is running at port 8080...');/<code>
此方法無需推薦，必選。
方案三：Nodejs中間件代理跨域
原理大致與nginx相同，都是通過啟一個代理服務器，實現數據的轉發，也可以通過設置cookieDomainRewrite參數修改響應頭中cookie中域名，實現當前域的cookie寫入，方便接口登錄認證。
實現方式分為兩類：是否運用webpack
不使用webpack：兩次跨域，利用node + express + http-proxy-middleware搭建一個proxy服務器。前端設置
<code>var xhr = new XMLHttpRequest(); // 前端開關：瀏覽器是否讀寫cookie xhr.withCredentials = true; // 訪問http-proxy-middleware代理服務器 xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true); xhr.send();/<code>
中間件服務器
<code>var express = require('express'); var proxy = require('http-proxy-middleware'); var app = express(); app.use('/', proxy({ // 代理跨域目標接口 target: 'http://www.domain2.com:8080', changeOrigin: true, // 修改響應頭信息，實現跨域並允許帶cookie onProxyRes: function(proxyRes, req, res) { res.header('Access-Control-Allow-Origin', 'http://www.domain1.com'); res.header('Access-Control-Allow-Credentials', 'true'); }, // 修改響應信息中的cookie域名 cookieDomainRewrite: 'www.domain1.com' // 可以為false，表示不修改 })); app.listen(3000); console.log('Proxy server is listen at port 3000...');/<code>
node 服務端設置
<code>var http = require('http'); var server = http.createServer(); var qs = require('querystring'); server.on('request', function(req, res) { var params = qs.parse(req.url.substring(2)); // 向前臺寫cookie res.writeHead(200, { 'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:腳本無法讀取 }); res.write(JSON.stringify(params)); res.end(); }); server.listen('8080'); console.log('Server is running at port 8080...');/<code>運用webpack：利用node + webpack + webpack-dev-server代理接口跨域。
<code>// webpack.config.js部分配置 module.exports = { entry: {}, module: {}, ... devServer: { historyApiFallback: true, proxy: [{ context: '/login', target: 'http://www.domain2.com:8080', // 代理跨域目標接口 changeOrigin: true, secure: false, // 當代理某些https服務報錯時用 cookieDomainRewrite: 'www.domain1.com' // 可以為false，表示不修改 }], noInfo: true } }/<code>
此方法與Nginx代理跨域原理基本一致，因此建議使用Nginx代理即可。
方案四：WebSocket協議跨域
WebSocket protocol是HTML5一種新的協議。它實現了瀏覽器與服務器全雙工通信，同時允許跨域通訊，是server push技術的一種很好的實現。
原生WebSocket API使用起來不太方便，我們使用Socket.io，它很好地封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支持webSocket的瀏覽器提供了向下兼容。
前端設置
<code>
user input：
/<code>node socket設置
<code>var http = require('http'); var socket = require('socket.io'); // 啟http服務 var server = http.createServer(function(req, res) { res.writeHead(200, { 'Content-type': 'text/html' }); res.end(); }); server.listen('8080'); console.log('Server is running at port 8080...'); // 監聽socket連接 socket.listen(server).on('connection', function(client) { // 接收信息 client.on('message', function(msg) { client.send('hello：' + msg); console.log('data from client: ---> ' + msg); }); // 斷開處理 client.on('disconnect', function() { console.log('Client socket has closed.'); }); });/<code>
此方法需要前後端使用Socket.io配合使用，可以嘗試，但實際運用範圍有限制，不太推薦
很開心大家能讀到這裡，到目前為止關於前端跨域的問題及解決方案已經全部講解完畢，不知道小夥伴們有沒有掌握呢？
內容太多建議先收藏，不過一定記得回來閱讀哦，不要做收藏黨。
有任何問題可以在下方留言或私信我，想了解更多前端知識歡迎關注公眾號“一郭鮮”，小郭將與你一起成長，文章也將同步更新於公眾號