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

最新推荐文章于 2025-11-04 10:23:55 发布

原创最新推荐文章于 2025-11-04 10:23:55 发布 · 3.4k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#Vue打包 #Vue生产环境跨域 #Nginx配置 #Nginx

本文介绍如何使用Nginx解决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项目的创建，打包就不在这里说了，相信能遇到这个问题的创建项目，打包已经不是问题了。

亲测，完美解决。