關於前端跨域這個老生長談的問題，解決方案也是鋪天蓋地，但大家是否真正從原理上到實踐已經完全掌握了呢？小郭今天將總結所有的跨域解決方案，讓你在面試中收穫滿分。
本文將從跨域場景到跨域方案逐一說明，重點突出最常用跨域方案，讓你工作開發不用愁。
由於本文涉及篇幅較長（建議先收藏），因此分上下集講述，力爭把最全面的跨域問題分享給大家。
上文主要介紹關於跨域概念、原理及五種跨域方案，現做簡單回顧：
回顧
跨域：指一個域下的文檔或腳本試圖去請求另一個域下的資源，由於瀏覽器同源策略限制而產生。
方案：通過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配合使用，可以嘗試，但實際運用範圍有限制，不太推薦
很開心大家能讀到這裡，到目前為止關於前端跨域的問題及解決方案已經全部講解完畢，不知道小夥伴們有沒有掌握呢？
內容太多建議先收藏，不過一定記得回來閱讀哦，不要做收藏黨。
有任何問題可以在下方留言或私信我，想了解更多前端知識歡迎關注公眾號“一郭鮮”，小郭將與你一起成長，文章也將同步更新於公眾號
分享到:
