记录折磨我24小时的诡异跨域BUG

0.事发经过

我办公室和对面的用的不是一个网，在做公司内部网页给对面的用，然后我这边网页什么的OK了，把测试链接（我的IP+端口）发给对面的，对面的说输完账户密码点登录没反应，我就奇了怪了纳了个闷，问了组长，组长说用NGINX做代理，我速度看了下NGINX怎么整，然后犯了几个憨批错误，最后用一个诡异的方法解决了。

CTRL+F5，没错，就是这个神奇的【清除缓存】！！！

1.错误分析

实际上我也不知道为什么会出现这种错误，表现为点击1次login按钮，出现两次login请求，（猜测可能是和表单的提交冲突，但是现在出现4次了。。。我真的不知道为什么）。然后网络活动是这个样子

 

 下面的右侧是我本地成功发出去的情况

 

 蜜汁只有临时标头，这个我不知道为什么

问了后端的，他说因为我们两个办公室网段不一样，我们是20，他们是0，不在一个局域网里面，

2.解决方法

来来来，重头戏

首先配置vue.config.js里面的proxy，我看的这个vue2的proxyTable，用法差不多。

 

 搞清楚这个/api是啥之后我们开始捣鼓自己的

 

 这里的/api会用在axios配置上面

 

NGINX里面的nginx.config再这么配置/pai

 

    server {
        listen       20041;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:\dist(19)\distKq;
            index  index.html index.htm;
        }
        # location ^~ /api/{
        location /api/{
               proxy_pass_request_headers on;
            proxy_set_header Host $host;
            proxy_set_header X-Real-YP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-NginX-Proxy true;
            proxy_read_timeout 300;
            fastcgi_read_timeout 600;
            proxy_pass ...:8081/;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        error_page   404 /404_error.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

 

 这里的404错误我特地配置了错误页，不过因为我前端网页里也配置了，所以发生404错误用的是那个里面的。

如果是修改，记得

nginx -s quit

start nginx

保存修改再启动NG

我到对面的那边刚点击这个20041端口的网页登录，还是失败，CTRL+F5，就登录成功了。

原因还是不明，不过终于登录上了哎！！！！！！！！！！！！！！！！！！！！！！

 

　　PS:刚刚忽然想到自己的一个憨批点，如果dist打包的原文件有更新，一定记得重新打包再重启NG!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

参考网页——vue 前端服务器代理，proxyTable简要叙述 - 廖客 - 博客园 (cnblogs.com)

踩坑记,proxyTable实现域名转换 - 知乎 (zhihu.com)

前端如何使用proxyTable和nginx解决跨域问题 - webhmy - 博客园 (cnblogs.com)

↑关于NG配置

↓NG基础学习

🚗 🚗 🚗 前端仔也需要懂的nginx内容 - 掘金 (juejin.cn)