Vue Nginx 跨域部署

最新推荐文章于 2026-05-17 06:01:48 发布

原创最新推荐文章于 2026-05-17 06:01:48 发布 · 2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue项目打包后，由于proxyTable配置失效导致接口请求失败的问题，以及如何通过Nginx配置反向代理来解决线上环境的跨域问题。在开发环境中，可以设置VUE_APP_API_PROXY_TARGET代理目标，并在vue.config.js中配置proxyTable。而在生产环境中，需要在Nginx的配置文件中添加相应代理规则，将/api/路径的请求转发到后端服务器。然而，如果缺少了'/'，会导致请求路径错误，出现404问题。

为什么要用nginx跨域部署

Vue项目打包完之后接口请求后端接口数据返回404，这是由于Vue项目打包静态文件之后 proxyTable代理配置失效，proxyTable是依据webpack实现的。要实现前后端分离项目的线上部署并解决跨域问题一种解决方案是通过nginx配置反向代理实现。

开发环境配置

VUE_APP_API_PROXY_TARGET配置代理的地址。

在vue.config.js中配置

module.exports = {
  ...
  devServer: {
	...
    proxy: {
      "/api": {
        target: process.env.VUE_APP_API_PROXY_TARGET,
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        },
      },
    },
    // after: mockServer(),
  }
}

生产环境的Nginx配置

在/etc/nginx/conf.d新建一个xxx.conf，'/‘的资源是Vue打包生成的文件，’/api/'是一个内部代理，如果访问http://tot.makerknz.cn/api/user/login 则跳转到http://172.26.146.68:9200/user/login (由于使用的是podman安装的nginx不能使用localhost)

server {
 listen 80;
 server_name tot.makerknz.cn;
 location / {
   root /usr/share/nginx/html/product-frontend;
   index index.html index.htm;
 }
 
  location /api/ {
   proxy_set_header Host $http_host;
   proxy_pass http://172.26.146.68:9200/;
   # proxy_pass http://knz-product-manager:9200/;
 }
 
}