Nginx解决跨域问题

1. 跨域解释

1.1 怎么知道我遇到了跨域问题

如果项目没做前后端分离，是不会有跨域问题的。

前后端分离的项目中，前端调用后台服务时，报错 No 'Access-Control-Allow-Origin' header is present on the requested resource，你就是遇到了跨域问题。

1.2 跨域的产生

跨域的产生来源于现代浏览器所通用的‘同源策略’，

所谓同源策略是指只有在地址的协议,ip,端口都一样情况下,才允许访问相同的cookie、localStorage或是发送Ajax请求等等。若在不同源的情况下访问，就称为跨域.

1.3 同源策略

请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险~

2. Nginx解决跨域问题

2.1 先明确几个概念

1. 首先明确一个概念，前端项目、后端项目、以及nginx，这就是三个server项目，他们只是互相之间交流数据；

2. 三个项目都有自己的ip：port组合，哪怕你是在同一台服务器上启动这三个server，他们的port也是不可能有一样的；

所以，前端项目，不论访问nginx还是访问后端项目，都会产生跨域问题

2.2 解决跨域

以下举例都是项目在同一台机器上，所以IP相同，只以端口区分前端项目（8081）、后端项目（8082）和nginx（8080）

方法1：在nginx中配置地址重写（或者转发也行）

访问地址以/resource开头的都会被这个模块捕获，转发到http://192.168.137.189:8082的后端项目上去。

访问地址以/js开头的也被这个模块捕获，转发到http://192.168.137.189:8081的前端项目上去。

server
{
    listen       8080;
    location /resource {
    rewrite  ^/resource/?(.*)$ /$1 break;
        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://192.168.137.189:8082/; # 转发地址
    }
    location /js {
    rewrite  ^/js/?(.*)$ /$1 break;
        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://192.168.137.189:8081/; # 转发地址
    }
}

此时统一通过nginx访问前后端项目，通过/js标识转发到前端项目，通过/resource标识转发到后端项目。

浏览器同源策略记录的就是http://192.168.137.189:8080/，浏览器也只访问这个nginx的8080地址，跨域问题也就得到了解决。

方法2：nginx中添加允许跨域请求头

server
{
    listen       8080;
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
 
    location /resource {
        rewrite  ^/resource/?(.*)$ /$1 break;
        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://192.168.137.189:8082/; # 转发地址
    }

这就和不用nginx，直接在后端项目中（tomcat或者自己写的服务端代码）配置允许跨域一样，只不过把允许跨域的配置放在nginx中，

这个配置解决了前端项目访问nginx的跨域问题，而nginx访问后端项目不存在跨域问题（不是浏览器，没有同源策略限制）。此时nginx对于后端就相当于一个代理分发服务器。

3. 总结

浏览器的同源策略只记录他访问对象的ip和port，

访问其他资源如果还是这个ip：port，就不存在跨域问题，如果不是这个ip：port，就用nginx讲这个ip：port转发到要访问的ip：port，让他仍然访问这个同源策略的ip：port.