由于安全性和防盗链等原因吗，一般在服务端都会设置跨域限制，然而跨域限制一般只在浏览器端存在，对于服务端或IOS、Android等客户端是不存在的，使用代理是常见的解决方案，比如：Nginx反向代理，nodejs代理…

这里以API代理和图片代理为例，API来自知乎链接。

1.安装依赖

首先安装依赖npm install --save-dev request

2.设置代理域

1
2
3
4
5
6
const http = require('http');
const request = require('request');

const hostname = '127.0.0.1';
const port = 8010;
const imgPort = 8011;

3.创建一个API代理服务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 创建一个API代理服务
const apiServer = http.createServer((req, res) => {
    const url = 'http://news-at.zhihu.com/api/2' + req.url;
    //  /news/latest
    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);
});

// 监听8080端口
apiServer.listen(port, hostname, () => {
    console.log(`接口代理运行在http://${hostname}:${port}`);
})

3.创建一个图片代理服务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 创建一个图片代理服务
const imgServer = http.createServer((req, res) => {
    const url = req.url.split('/img/')[1];
    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);
})

// 监听8011端口
apiServer.listen(imgPort, hostname, () => {
    console.log(`图片接口代理运行在http://${hostname}:${imgPort}`);
})

4.启动服务

node filename.js通过node命令运行该js文件。

代理的核心是在返回的头部（response header）中添加一项Access-Control-Allow-Origin为"*"，允许所以域访问。这里监听了两个端口：8010和8011，比如真实的接口为：http://news.zhihu.com/api/2/news/latest， 开发时改写为：http://127.0.0.1:8010/news/latest； 图片真实地址为：http://pic2.zhihu.com/pic0.jpg， 开发时改写为：http://127.0.0.1:8011/img/http://pic2.zhihu.com/pic0.jpg。