解决Vue生产环境中的跨域问题

一个项目中用到了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项目的创建，打包就不在这里说了，相信能 遇到这个问题的创建项目，打包已经不是问题了。

亲测，完美解决。