說說如何利用 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哈哈~

代理內容：

代理圖片：