vue-element-admin+跨域代理+部署Nginx代理

最新推荐文章于 2024-10-08 02:10:34 发布

aicloudgo

最新推荐文章于 2024-10-08 02:10:34 发布

阅读量2.4k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/evelen/article/details/114988854

版权

本文介绍了在开发环境使用vue-element-admin进行跨域配置的方法，并详细讲解了如何在生产环境中利用Nginx进行跨域代理设置，确保前后端分离项目的顺利部署和通信。

摘要由CSDN通过智能技术生成

一：开发环境跨域代理

# URL代理拦截

1.在 .env.development 文件内配置：

# 环境变量以 VUE_APP_ 为开头。如:VUE_APP_API

# 开发环境配置
ENV = 'development'

# 开发环境请求后端api
VUE_APP_BASE_API = '/dev-api'
VUE_APP_OAUTH_API = '/oauth-api'

--------------------------------------------------------

2.在 vue.config.js 内配置：

devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:9527`, // localhost
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
      [process.env.VUE_APP_OAUTH_API]: {
        target: `http://localhost:9528`, // 多跨域配置
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_OAUTH_API]: ''
        }
      }
    },
    dis