【Linux】Nginx解决跨域问题

---

一、跨域问题

在前后端分离的项目中，前端通常运行在一个域名或端口上，而后端运行在另一个域名或端口上。当浏览器发起跨域请求时，即前端页面向后端发送请求的域名、端口或协议与当前页面的域名、端口或协议不一致时，就会发生跨域问题。

跨域问题是由浏览器的同源策略引起的安全机制。同源策略要求网页只能访问与其来源相同的资源，即协议、域名和端口必须一致，而跨域请求则突破了这个限制。

当以下任一条件不满足时，就会发生跨域问题：

不同的协议：例如，一个页面通过 HTTP 协议加载了 JavaScript，然后尝试向使用 HTTPS 协议的服务器发送请求。
不同的域名：例如，一个页面从 www.example.com 加载了 JavaScript，然后尝试向 api.example.com 发送请求。
不同的端口：例如，一个页面从 www.example.com:8080 加载了 JavaScript，然后尝试向 www.example.com:3000 发送请求。

二、解决跨域问题

为了解决跨域问题，可以借助Nginx来进行反向代理。以下是使用Nginx解决跨域问题的步骤：

1. 在前端服务器上安装和配置Nginx，安装教程可以看我上一篇文章：《【Linux】Linux中安装Nginx》。
2. 在Nginx配置文件中使用反向代理实现跨域。

示例
前端调试页面的地址是：http://www.example.com:8080/dist/index.html
后端请求的接口地址是：http://api.example.com:8181/api/

Nginx默认配置文件地址 /usr/local/nginx/conf，如果安装的时候指定了路径，就在你指定的目录下，修改配置文件nginx.conf：

server{
        listen 80;
        server_name www.example.com; # 前端域名或ip
 		
 		# 默认配置，无需修改
        location / {
           root   html;
           index  index.html index.htm;
        }
        
        # 后端接口配置
        location /api {
            proxy_pass http://api.example.com:8181;
        }
                
        # 前端页面配置
        location /dist {
            proxy_pass http://www.example.com:8080/dist;
        }
    }

PS：前端访问后端API的域名或ip需要设置为server_name的值，端口号为监听的端口号，然后根据/api匹配的路径转发到后端接口配置的地址上，举例：后端实际查询用户列表的接口地址为http://api.example.com:8181/api/user/list，那么前端页面访问接口时路径应该为http://www.example.com/api/user/list（我这里端口是80，所以可以省略）。

如果前端不修改，会出现报错Access to XMLHttpRequest at 'http://api.example.com:8181/api/user/list' from origin 'http://www.example.com' 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.，就算配置了add_header 'Access-Control-Allow-Origin' '*' always也无效。

3. 重新加载Nginx配置：在终端中执行命令以重新加载Nginx配置文件：

$ ./nginx -s reload

在重新加载Nginx配置文件之前，可以先使用 ./nginx -t 验证nginx配置文件是否正确。

4.页面访问：http://www.example.com/dist/index.html。

三、结尾

以上就是全部了，为了解决这个问题我头都大了，不管怎么改配置都无效，最后还是前端改了下马上就可以了，所以记录一下。