Nginx反向代理实现Vue跨域注意事项

1、通过搜索引擎访问Nginx官网——免费使用——NGINX开源版(免费下载)或者通过以下链接直接访问Nginx下载页面下载对应的版本(下载页面)。以下以1.24.0为例

2、修改nginx的配置文件，在conf文件夹下，文件名为nginx.conf；以下是我修改完的配置(在http的server项内)：

		listen       5101;#需要监听的端口
        server_name  127.0.0.1;
        #charset koi8-r;
        charset utf-8;
        #access_log  logs/host.access.log  main;

        location /api { #尾加也可以斜杠"/"，proxy_pass 的值同步修改
          proxy_pass              http://127.0.0.1:8968/api;#注意：使用代理地址时跟上面保持一致(/api)末尾不加斜杠"/"。
          proxy_set_header        Host 127.0.0.1;
          proxy_set_header        X-Real-IP $remote_addr;
          proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        location / {  #使用"/"拦截全路径的时候记得放在最后。
            root   html; # html表示存放静态资源的文件夹，根据实际情况修改
            index  index.html index.htm; # 默认的访问文件
           if (!-e $request_filename) {
              rewrite ^(.*)$ /index.html?s=$1 last;
             break;
           }  #处理页面刷新404错误
        }

我已将相关要点在对应配置后面做了备注，可能会影响正常使用，建议大家在实际使用中把和配置在同一行的备注去掉。

配置完conf文件后，双击nginx启动

这样我们在访问http://192.168.100.252:5101的时候，就会打开你的前端项目页面，在请求接口时，需要在前端项目将base url改为：http://127.0.0.1:5101/api；这样当前端请求后端地址http://127.0.0.1:5101/api/auth/login 时会将请求的接口地址带到http://127.0.0.1:8968/api/auth/login上；我的前端和后端部署在同一台服务器上，不在同一台服务器上也可以实现，只需要修改proxy_pass的对应值(后端接口的真实地址)就可以了。我们前端项目的域名和请求后端接口的域名都是192.168.100.252:5101，这样就不会存在跨域问题了。
在项目部署中遇到了页面刷新404和方向代理不能处理问题，都解决了。解决方案如下：
处理页面刷新404问题，在localtion / 下加

 if (!-e $request_filename) {
              rewrite ^(.*)$ /index.html?s=$1 last;
             break;
           }

不能正常反向代理:
错误配置如下：

location /api/ {
          proxy_pass              http://127.0.0.1:5102/api;
          proxy_set_header        Host 127.0.0.1;
          proxy_set_header        X-Real-IP $remote_addr;
          proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        }

修改后的正确配置

location /api/ {
          proxy_pass              http://127.0.0.1:5102/api/;
          proxy_set_header        Host 127.0.0.1;
          proxy_set_header        X-Real-IP $remote_addr;
          proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        }

或者下面示例中的也完全可以

location /api {
          proxy_pass              http://127.0.0.1:5102/api;
          proxy_set_header        Host 127.0.0.1;
          proxy_set_header        X-Real-IP $remote_addr;
          proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        }