利用Nginx解决跨域问题

解决跨域问题的方案有很多，但多多少少都会受到浏览器种类的影响或相应数据类型之类的一些限制。利用nginx的反向代理实现跨域，相比于其他方案来说无论是性能，通用性，灵活性，都是一种更好的选择。

下面直接通过一个例子看看如何实现。

1.启一个node服务器。监听9000端口。

var app=require("express")();

app.get("/getinfo",function(req,res){
res.send("success");
});

app.listen(9000);

2.建一个HTML文件，并在该页面发起一个向node服务器的ajax请求。

var xhr =new XMLHttpRequest();
xhr.open('get','http://localhost:9000/getinfo',true);
xhr.send();
xhr.onreadystatechange=function () {
if(xhr.readyState==4){
console.log(xhr.responseText);
}
};

可以看到出现了跨域问题浏览器报错，提示我们要在响应中加上对应的头信息。



3.这时候就轮到nginx出场了，我们来对nginx进行配置。

server{
listen 3001;
server_name localhost;

location /{
proxy_set_header   X-Real-Scheme    $scheme;
proxy_set_header   Host $host;
proxy_set_header   X-Real-IP        $remote_addr;
proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
proxy_pass http://localhost:63342/form-demo/promise-demo/demo.html; }

location /getinfo{
proxy_set_header   X-Real-Scheme    $scheme;
proxy_set_header   Host $host;
proxy_set_header   X-Real-IP        $remote_addr;
proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
proxy_pass http://localhost:9000/getinfo; }
}

接下来回到我们的请求页面，修改一下请求地址

xhr.open('get','/getinfo',true);

接着重启nginx。在浏览器打开http://localhost:3001/，可以看到，成功收到响应。



就酱紫，我们利用nginx反向代理，让请求页面和服务器在nginx的包装下看起来是同源的，骗过了浏览器，在NG的保护下实现了跨域访问。