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

来源：CSDN

作者：huifeideyu6

链接：https://blog.csdn.net/huifeideyu6/article/details/104738727

标签

nginx

localhost