閱讀目錄
深入跨域問題(4) - 利用 代理伺服器 解決跨域（本篇）
在上面的文章中，我們依此瞭解到，CORS ，JSONP 兩種方式實現跨域請求。
這兩種方法，都需要 前後端進行配合 才能夠正確地處理跨域問題。 今天介紹一種方法，不需要前後端配合，前端可獨立完成。
眾所周知，同源策略是瀏覽器需要遵循的標準，重點是 瀏覽器 ，如果，是伺服器是不是就不用遵守了呢 ？？？
NODE 作為客戶端
這是，我們的一個猜想，非瀏覽器之間，不用遵行同源策略，先來測試一下：
NODE 傳送 POST 方法
客戶端：
const http = require('http');
const options = {
hostname: '127.0.0.1', // 注意這裡不要新增 http 字首
port: 4000, // 伺服器埠號
path: '/', // 訪問路徑
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8',
}
};
const request = http.request(options, (serverResponse) => {
var body = '';
serverResponse.on('data', (chunk) => {
body += chunk;
});
serverResponse.on('end', () => {
console.log('The data is ' + body);
})
});
request.end();
複製程式碼伺服器，發起一個POST請求
PS: 在瀏覽器中 POST 方法下 Content-Type 為 application/json; ，會觸發 預請求 （請看我之前的文章）。
伺服器：
const http = require('http');
const data = { name: 'BruceLee', password: '123456' };
const server = http.createServer((request, response) => {
if (request.url === '/') {
response.end( JSON.stringify(data) );
}
});
server.listen(4000, () => {
console.log('The server is running at http://localhost:4000');
});
複製程式碼注意：我們沒有在伺服器內部，加入任何與 CORS 跨域資源共享的首部欄位 。
實驗結果：
測試結果表明，通過 NODE 發起請求可以避免 瀏覽器 的同源策略。
代理伺服器
代理伺服器，需要做以下幾個步驟：
- 接受客戶端 請求 。
- 將 請求 轉發給伺服器。
- 拿到伺服器 響應 資料。
- 將 響應 轉發給客戶端。
這是簡單的文字解析，下方為圖解流程：
這就是，代理伺服器的工作機制（PS：畫的垃圾，哈哈哈）。
實現代理伺服器
在瞭解，代理伺服器的工作機制之後，下面我們將用 NODE 實現代理伺服器。
客戶端：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax測試</title>
</head>
<body>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script>
var data = { name: 'BruceLee', password: '123456' };
$.ajax({
url: "http://localhost:3000",
type: "post",
data: JSON.stringify(data),
contentType: 'application/json;charset=utf-8',
success: function (result) {
console.log(result);
},
error: function (msg) {
console.log(msg);
}
})
</script>
</body>
</html>
複製程式碼同樣，你可以換成，PUT，DELETE 等方法，進行測試。
代理伺服器：3000 埠
const http = require('http');
// 第一步：接受客戶端請求
const server = http.createServer((request, response) => {
// 代理伺服器，直接和瀏覽器直接互動，也需要設定：CORS 的首部欄位
response.writeHead(200, {
'Access-Control-Allow-Origin': '*', // 設定 optins 方法允許所有伺服器訪問
'Access-Control-Allow-Methods': '*',
'Access-Control-Allow-Headers': 'Content-Type',
});
// 第二步：將請求轉發給伺服器
const proxyRequest = http.request({
host: '127.0.0.1',
port: 4000,
url: '/',
method: request.method,
headers: request.headers
}, (serverResponse) => {
// 第三步：收到伺服器的響應
var body = '';
serverResponse.on('data', (chunk) => {
body += chunk;
});
serverResponse.on('end', () => {
console.log('The data is ' + body );
// 第四步：將響應結果轉發給瀏覽器
response.end(body);
})
}).end();
});
server.listen(3000, () => {
console.log('The proxyServer is running at http://localhost:3000');
});
複製程式碼需要我們注意的是：代理伺服器，直接與瀏覽器相連線，也必須需要遵守 瀏覽器的同源策略，
伺服器：4000 埠
const http = require('http');
const data = { name: 'BruceLee', password: '123456' };
const server = http.createServer((request, response) => {
if (request.url === '/') {
response.end( JSON.stringify(data) );
}
});
server.listen(4000, () => {
console.log('The server is running at http://localhost:4000');
});
複製程式碼為了篇幅仍然較小，我採用了較為簡潔的程式碼，你可以自己多試試 比如：PUT，DELETE 方法。
實驗結果：
成功避免了跨域請求。
現在，我們已經完成了，代理伺服器解決跨域問題了，並且不需要後臺做任何設定。
參考與鳴謝
- NODE 官方文件
- https://blog.csdn.net/real_bird/article/details/52714535
代理伺服器是現代化的前端常用的手段，另外還有反向代理，等等眾多方式實現跨域請求。