阅读目录

深入跨域问题(1) - 初识 CORS 跨域资源共享；

深入跨域问题(2) - 利用 CORS 解决跨域

深入跨域问题(3) - 利用 JSONP 解决跨域

深入跨域问题(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

代理服务器是现代化的前端常用的手段，另外还有反向代理，等等众多方式实现跨域请求。