我们用element admin开发, 往往使用它的官方模板vue-admin-template,

如果要解决开发环境跨域问题, 官方给出的前端解决方案如下:

在 dev 开发模式下可以下使用 webpack 的 proxy 使用也是很方便,参照 文档 就会使用了,楼主一些个人项目使用的该方法。

跨域问题 | vue-element-admin

但文档没有提到一些关键细节, 因此只设置proxy会导致跨域不成功, 下面是两个关键地方的修改, 以使跨域生效. (此文虽是基于vue-admin-template, 但其他项目的跨域问题解决思路也都差不多)

1, 

// vue.config.js 

// before: require('./mock/mock-server.js')

注释掉上面这段代码, 否则接口会走mock而不是代理, 也就不会生效

2, 

// /src/utils/request.js

// baseURL: process.env.VUE_APP_BASE_API

 注释掉上面这段代码, 否则接口会走axios设置的baseURL而非代理地址,

如果你想在生产环境配置baseURL, 毕竟生产环境不走代理, 有配置baseURL的需求, 可这样配置

baseURL: process.env.NODE_ENV === 'development' ? undefined : process.env.VUE_APP_BASE_API,

上面两处改完重启服务器, 解决

Logo

前往低代码交流专区

更多推荐