Nginx解决跨域问题

「爱情、让人受尽委屈。」 2022-12-24 07:57 48阅读 0赞

今天有个需求，需要跨服务器请求，这其中涉及到了跨域问题，在度娘上找了很久的资料，终于解决了！！！然后我自己写了个demo做个笔记。

### 1、什么是跨域 ###

从某一个域请求其他域的各类资源，其中只要两个地址的域名、端口或者协议有不同的地方就会视为跨域，跨域资源无法直接获取。

提示：跨域请求都会默认发送两次请求，第一次是预检请求，查询是否支持跨域，第二次才是真正的post提交  
比如：  
域名不同 www.**a**.com/1.html 请求 www.**b**.com/1.js  
端口不同 www.a.com:**8000**/1.html 请求 www.a.com:**8001**/1.js  
协议不同 **http**://www.a.com/1.html 请求 **https**://www.a.com/1.html

### 2、业务场景 ###

场景：A 项目去请求 B 项目的  /index/excel\_import1接口 因为端口号不同请求报错，提示不能跨域

我本地启动了两个服务

服务A：localhost：8080

服务A中的html页面代码

// html代码
    <a onclick="CrossDomain()">nginx跨域</a>
    <a onclick="notCrossDomain()">不跨域</a>
    
    
    
    // js代码
    // 可以跨域
    function CrossDomain() {
        $.ajax({
            url:'http://localhost:8082/index/excel_import1',
            success:function(res) {
                console.log("success",res)
            },
            error:function(err) {
                console.log('fail',err)
            }
        })
    }
    // 不能跨域
    function notCrossDomain() {
        $.ajax({
            url:'http://localhost:8081/index/excel_import1',
            success:function(res) {
                console.log("success",res)
            },
            error:function(err) {
                console.log('fail',err)
            }
        })
    }

服务B：localhost：8081       提供的接口：http://localhost:8081/index/excel\_import1（该接口本地能调通）

访问服务A ： localhost：8080 ，进入首页，首页有两个按钮，

![20201127143826908.png][]

1.  可以看到点击第二个按钮会出现跨域问题。因为它直接请求了'http://localhost:8082/index/excel\_import1‘ ，因浏览器同源策略会出现跨域问题

报错信息：Access to XMLHttpRequest at 'http://localhost:8081/index/excel\_import1' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

2.  第一个按钮我们先别点，因为我们还没配置Nginx。下面我们配置一下nginx

### 3、Nginx配置 ###

**下载安装nginx**

[nginx下载地址][nginx]

*  选择其中一个版本下载，再解压即可使用
 *  在nginx目录下输入nginx -v，若出现版本号，则安装成功

**配置nginx**

进入nginx的conf文件夹，找到如下入所示的文件进行编辑, 编辑内容如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDM3NDc4_size_16_color_FFFFFF_t_70][]

http {
        include       mime.types;
        default_type  application/octet-stream;
        sendfile        on;
        keepalive_timeout  65;
        server {
    		#需要监听的端口号
            listen       8082;
            server_name  localhost;
            location / {
    			#配置跨域的代码
    			add_header Access-Control-Allow-Origin '*';
    			add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    			add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    		 
    			if ($request_method = 'OPTIONS') {
    				return 204;
    			}
    			#对于所有 http://localhost:8082/下面的请求，都转发到  http://localhost:80801
    			proxy_pass http://localhost:8081;
            }
    
        }

注：跨域代码可在nginx里配置，也可在后台代码添加如下配置，（不能两边都配置，会报错）

response.setHeader("Access-Control-Allow-Origin","*");

配置好了之后我们打开cmd，进入nginx解压目录 执行start nginx

![20201127145511674.png][]

这个时候我们去点击第一个按钮，后台返回数据成功！

![20201127145613679.png][]

[20201127143826908.png]: /images/20221120/ee928cb97c39406eb9b580929c3480ca.png
[nginx]: http://nginx.org/en/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDM3NDc4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201127144810374.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDM3NDc4,size_16,color_FFFFFF,t_70
[20201127145511674.png]: https://img-blog.csdnimg.cn/20201127145511674.png
[20201127145613679.png]: https://img-blog.csdnimg.cn/20201127145613679.png