說說如何利用 Node.js 代理解決跨域問題

前後端分離，經常會出現跨域訪問被限制的問題。

跨域訪問限制是服務端出於安全考慮的限制行為。即只有同域或者指定域的請求，才能訪問。這樣還可以防止圖片被盜鏈。服務端（比如 Node.js）可以通過代理，來解決這一問題。

1 安裝 request 庫

npm install request --save-dev
複製程式碼

2 配置

我們以知乎日報為例，配置兩個代理。一個代理內容，另一個代理圖片。

在專案根目錄，配置 proxy.js ：

//代理
const http = require('http');
const request = require('request');

const hostIp = '127.0.0.1';
const apiPort = 8070;
const imgPort = 8071;

//建立 API 代理服務
const apiServer = http.createServer((req, res) => {
    console.log('[apiServer]req.url='+req.url);
    const url = 'http://news-at.zhihu.com/story' + req.url;
    console.log('[apiServer]url='+url);
    const options = {
        url: url
    };

    function callback(error, response, body) {
        if (!error && response.statusCode === 200) {
            //編碼型別
            res.setHeader('Content-Type', 'text/plain;charset=UTF-8');
            //允許跨域
            res.setHeader('Access-Control-Allow-Origin', '*');
            //返回代理內容
            res.end(body);
        }
    }

    request.get(options, callback);
});

//監聽 API 埠
apiServer.listen(apiPort, hostIp, () => {
    console.log('代理介面，執行於 http://' + hostIp + ':' + apiPort + '/');
});

//建立圖片代理服務
const imgServer = http.createServer((req, res) => {
    const url = 'https://pic2.zhimg.com/' +req.url.split('/img/')[1];
    console.log('[imgServer]url=' + url);
    const options = {
        url: url,
        encoding: null
    };

    function callback(error, response, body) {
        if (!error && response.statusCode === 200) {
            const contentType = response.headers['content-type'];
            res.setHeader('Content-Type', contentType);
            res.setHeader('Access-Control-Allow-Origin', '*');
            res.end(body);
        }
    }

    request.get(options, callback);


});

//監聽圖片埠
imgServer.listen(imgPort, hostIp, () => {
    console.log('代理圖片，執行於 http://' + hostIp + ':' + imgPort + '/')
});



複製程式碼

• 代理的關鍵點是在響應頭新增 Access-Control-Allow-Origin 為 *，表示允許所有域進行訪問。

代理前地址	代理後地址
https://pic2.zhimg.com/v2-bb0a0282fd989bddaa245af4de9dcc45.jpg	http://127.0.0.1:8071/img/v2-bb0a0282fd989bddaa245af4de9dcc45.jpg
http://news-at.zhihu.com/story/9710345	http://127.0.0.1:8070/9710345

3. 執行

執行：

node proxy.js
複製程式碼

執行結果：

代理介面，執行於 http://127.0.0.1:8070/ 代理圖片，執行於 http://127.0.0.1:8071/

開啟瀏覽器，輸入代理後的地址，就可以正常訪問啦O(∩_∩)O哈哈~

代理內容：

代理圖片：