一个项目中用到了Vue,在开发环境中,跨域调接口,很容易就实现了。但是打包了,访问Vue项目发现调用接口的地方,报404了,找不到接口,我就一直在网上找原因。最后得知,网上一致认为,Vue的生产环境与开发环境的跨域解决方法是不一样的,最后我还是相信了。不多说了,说解决方案。(本文是作者原创,转发请标明出处)

我采用了nginx来部署Vue项目。

接口让Nginx配置一个与开发环境一致的访问路径,并代理到你的后台发在的服务器。

这里说的路径是说的“apis/"或者”api“。

直接上代码比较清楚一些。

Nginx的配置:

server{
        listen    81;#Vue项目的访问地址
        server_name    localhost;
        access_log  logs/host.access.log  main;
        location /    {
            root html/dist;
            index index.html;
        }
        
        location /apis/ {#这里是核心,与开发环境中代理路径一定要保持一致
            proxy_set_header Host $host;
            proxy_set_header x-forwarded-for    $remote_addr;
            proxy_set_header X-Real-IP    $remote_addr;
            proxy_pass http://localhost:8080/;#后台的接口
        }
    }

Vue项目的创建,打包就不在这里说了,相信能 遇到这个问题的创建项目,打包已经不是问题了。

亲测,完美解决。

Logo

前往低代码交流专区

更多推荐