Nginx处理跨域问题

朴灿烈づ我的快乐病毒、 2024-03-16 10:29 64阅读 0赞

## 1、前提条件 ##

准备：  
`前端网站地址：http://localhost:8080`  
`服务端网址：http://localhost:59200`

*  服务端没有处理跨域，且用postman测试服务接口正常
 *  当网站8080去访问服务端接口时，就产生了跨域问题，那么如何解决？接下来我把跨域遇到的各种情况都列举出来并通过nginx代理的方式解决（后台也是一样的，只要你理解的原理）。![在这里插入图片描述][2bb453e940dc40eeab1f04aaf2906020.png]

> 跨域主要涉及4个响应头：  
> Access-Control-Allow-Origin 用于设置允许跨域请求源地址 （预检请求和正式请求在跨域时候都会验证）  
> Access-Control-Allow-Headers 跨域允许携带的特殊头信息字段 （只在预检请求验证）  
> Access-Control-Allow-Methods 跨域允许的请求方法或者说HTTP动词 （只在预检请求验证）  
> Access-Control-Allow-Credentials 是否允许跨域使用cookies，如果要跨域使用cookies，可以添加上此请求响应头，值设为true（设置或者不设置，都不会影响请求发送，只会影响在跨域时候是否要携带cookies，但是如果设置，预检请求和正式请求都需要设置）。不过不建议跨域使用（项目中用到过，不过不稳定，有些浏览器带不过去），除非必要，因为有很多方案可以代替。

## 2 名词说明 ##

> 1、什么是预检请求？  
> 当发生跨域条件时候，览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错

![在这里插入图片描述][6b6ae748a8574445a834657b29e0b0fe.png]

### 2.1、配置nginx代理 ###

下面展示一些 `内联代码片`。

server {
        
        listen       22222;
        server_name  localhost;
        location  / {
        
            proxy_pass  http://localhost:59200;
        }
    }

*  测试代理是否成功，通过Nginx代理端口2222再次访问接口，可以看到如下图通过代理后接口也是能正常访问
 *  接下来开始用网站8080访问Nginx代理后的接口地址，报错情况如下:

> 情况1

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet'
     from origin 'http://localhost:8080' has been blocked by CORS
     policy: Response to preflight request doesn't pass access 
     control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

![在这里插入图片描述][b1896eb7bcf849239ccf2a3f1e554d11.png]

*  通过错误信息可以很清晰的定位到错误（注意看标红部分）priflight说明是个预请求，CORS 机制跨域会首先进行 preflight（一个 OPTIONS 请求）， 该请求成功后才会发送真正的请求。这一设计旨在确保服务器对 CORS 标准知情，以保护不支持 CORS 的旧服务器
 *  通过错误信息，我们可以得到是预检请求的请求响应头缺少了 Access-Control-Allow-Origin，错哪里，我们改哪里就好了。修改Nginx配置信息如下（红色部分为添加部分），缺什么就补什么，很简单明了

server {
        
        listen       22222;
        server_name  localhost;
        location  / {
        
            if ($request_method = 'OPTIONS') {
        
                add_header Access-Control-Allow-Origin 'http://localhost:8080';
                add_header Access-Control-Allow-Headers '*';
                add_header Access-Control-Allow-Methods '*';
                add_header Access-Control-Allow-Credentials 'true';
                return 204;
            }
            if ($request_method != 'OPTIONS') {
        
                add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
                add_header Access-Control-Allow-Credentials 'true';
            }
            proxy_pass  http://localhost:59200;
        }
    }

[2bb453e940dc40eeab1f04aaf2906020.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/9b30ec04996c441ab1fe6aca3112f436.png
[6b6ae748a8574445a834657b29e0b0fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1100e6c28f674b0eb08a3a257e0c17e4.png
[b1896eb7bcf849239ccf2a3f1e554d11.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/32571efb40c9474b9b9ebca303301f2d.png