閱讀目錄
深入跨域問題(4) - 利用 代理服務(wù)器 解決跨域（本篇）
在上面的文章中帚湘，我們依此了解到，CORS 甚淡，JSONP 兩種方式實現(xiàn)跨域請求雷恃。
這兩種方法横蜒，都需要 前后端進行配合 才能夠正確地處理跨域問題探橱。 今天介紹一種方法，不需要前后端配合焙贷。
眾所周知，同源策略是瀏覽器需要遵循的標(biāo)準(zhǔn)建邓，重點是 瀏覽器 ，如果睁枕，是服務(wù)器是不是就不用遵守了呢 官边？？外遇？
NODE 作為客戶端
這是注簿，我們的一個猜想，非瀏覽器之間跳仿，不用遵行同源策略诡渴，先來測試一下：
NODE 發(fā)送 POST 方法
客戶端：
const http = require('http');
const options = {
hostname: '127.0.0.1', // 注意這里不要添加 http 前綴
port: 4000, // 服務(wù)器端口號
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 方法下 Content-Type 為 application/json; ，會觸發(fā) 預(yù)請求 （請看我之前的文章）山上。
服務(wù)器：
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');
});
實驗結(jié)果：
測試結(jié)果表明眼耀，通過 NODE 發(fā)起請求可以避免 瀏覽器 的同源策略。
代理服務(wù)器
代理服務(wù)器佩憾，需要做以下幾個步驟：
- 接受客戶端 請求 哮伟。
- 將 請求 轉(zhuǎn)發(fā)給服務(wù)器。
- 拿到服務(wù)器 響應(yīng) 數(shù)據(jù)妄帘。
- 將 響應(yīng) 轉(zhuǎn)發(fā)給客戶端楞黄。
這是簡單的文字解析，下方為圖解流程：
這就是抡驼，代理服務(wù)器的工作機制（PS：畫的垃圾鬼廓，哈哈哈）。
實現(xiàn)代理服務(wù)器
在了解致盟，代理服務(wù)器的工作機制之后桑阶，下面我們將用 NODE 實現(xiàn)代理服務(wù)器。
客戶端：
<!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 等方法眷篇，進行測試萎河。
代理服務(wù)器：3000 端口
const http = require('http');
const server = http.createServer((request, response) => {
// 代理服務(wù)器，直接和客戶端交互，也需要設(shè)置：CORS 跨域資源共享
response.writeHead(200, {
'Access-Control-Allow-Origin': '*', // 設(shè)置 optins 方法允許所有服務(wù)器訪問
'Access-Control-Allow-Methods': '*',
'Access-Control-Allow-Headers': 'Content-Type',
});
// 請求發(fā)送器
const proxyRequest = http.request({
host: '127.0.0.1',
port: 4000,
url: '/',
method: request.method,
headers: request.headers
}, (serverResponse) => {
// 截獲虐杯，服務(wù)器返回過來的數(shù)據(jù)玛歌。
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');
});
需要我們注意的是：代理服務(wù)器，也需要遵守 同源策略擎椰，
服務(wù)器：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 方法值朋。
實驗結(jié)果：
成功避免了跨域請求。
實際上巩搏，現(xiàn)在昨登，已經(jīng)有很多實現(xiàn)代理服務(wù)器的插件了，你們可以自行百度贯底，這只是原理演示 ７崂薄！禽捆！
參考與鳴謝
代理服務(wù)器是現(xiàn)代化的前端常用的手段笙什，另外還有反向代理，等等眾多方式實現(xiàn)跨域請求胚想。
