ausheng

vue router跨域在nginx下报405,404错误的解决办法。

说明,vue项目在dev环境用npm run reserve 都运行正常。
在执行npm run build 之后,发布到生产环境,就出行了种种405,404的错误
以下主要都是修改 nginx.conf 文件中 server 里面的内容

location  /2018/ {
   proxy_pass http://192.168.1.5:2018/;
}

比如请求地址为http://192.168.1.2/2018/user_info
实际上相当于访问http://192.168.1.5:2018/user_info
如果 proxy_pass 最后的 / 去掉, 那实际就是访问http://192.168.1.5:2018/2018/user_info

404 解决办法

        location / {
            try_files $uri $uri/ @router;
        }

        location @router {
           rewrite ^.*$ /index.html last; 
           # 接到截取的uri 并按一定规则重写uri和vue路由跳转
        }

该部分全部 nginx.conf 内容

        location ^~ /2018/ {
            proxy_pass http://192.168.1.5:2018/;
        }

        location ^~ /5000/ {
            proxy_pass http://192.168.1.5:5000/;
        }

        location ^~ /2011/ {
            proxy_pass http://192.168.1.5:2011/;
        }

        location ^~ /store/ {
            proxy_pass http://store.com/;
        }

        location / {
            try_files $uri $uri/ @router;
        }

        location @router {
           rewrite ^.*$ /index.html last; 
           # 接到截取的uri 并按一定规则重写uri和vue路由跳转
        }

location 中不带有 ^~ 时,有时也会发生404 错误。目前加上就不会出现了。

ausheng

爱生活,爱编程

AUSHENG – BLOG

不要害羞,保持联系。我们喜欢结识有趣的人,结交新朋友。