nginx(一)：跨域问题

• 为什么会发生AJAX跨域？

浏览器限制

跨域

XHR(XMLHttpRequest)请求

同时满足以上三个条件的时候才会出现跨域问题

 

• 解决方案：

被调用方解决方案（支持跨域）：

前端代码写法（假设：a.com 调用方，b.com被调用方）如下，直接在代码中写明被调用方的具体地址

$.getJSON("http://b.com/test/get1").then(function(jsonObj) {
        result = jsonObj;
});

1. 浏览器直接发送请求到其他域的应用服务器

浏览器在请求头中添加Origin参数记录host，应用服务器通过实现filter,在响应头中设置Access-Control-Allow-Origin参数为host，从而通过浏览器的检验，达到跨域的目的

 

 

带Cookie的跨域

1. Access-Control-Allow-Origin:*?  这个参数的值不可以为*，需要是具体调用方的host，可以通过动态读取请求头的Origin参数设置该参数的值。

2. 发送的cookie是被调用方域名的cookie,而不是调用方的cookie

 

2. 浏览器将请求发送到其他域系统的http服务器（如：apache，nginx），然后http服务器再将请求发送到应用服务器。（在http服务器中配置请求头）

nginx配置如下：

 

调用方解决方案（隐藏跨域）：

nginx配置：
server {
    listen       80;
    server_name  a.com;

    location / {
        proxy_pass http://localhost:8081/ ;
    }
    
    location /panda {
        proxy_pass http://localhost:8080/test ;
    }
}

前端代码：
$.getJSON("/panda/get1").then(function(jsonObj) {
                   result = jsonObj;
               });

注意：这里url用的相对地址 就是访问 a.com/panda ，然后nginx的设置会使其反向代理到http://localhost:8080/test

实际上是a.com访问http://localhost:8080/test，但是 浏览器看起来是a.com访问a.com/panda根本没跨域! 当然么有跨域问题!

通过nginx解决跨域问题，两种方案的区别是：这个nginx是安装在调用方还是被调用方，安装在调用方，那么前端只需要写出相对地址url，安装在被调用方，那么前端需要写出被调用方的绝对路径

 

• nginx location匹配优先级：https://blog.csdn.net/agonie201218/article/details/92795522
• nginx反向代理实现负载均衡

http {
    upstream upstream_name{
        server 192.168.0.28:8001;
        server 192.168.0.28:8002;
    }

    server {
        listen       8080;
        server_name  localhost;

        location / {
            proxy_pass http://upstream_name;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}