#yyds干货盘点#vue项目vue.config.js 中 devServer proxy 未生效

时间：2023-02-23 11:12:44

clone ​​vue-material-admin​​​ 项目到本地运行,
修改了 ​​​.env.development​​, 希望代理到本地5005端口

# base api
VUE_APP_BASE_API = 'http://local.vma.isocked.com/api'

改为了(参考原始内容照葫芦画瓢, ​​.env.development​​误人啊)

# base ap
VUE_APP_BASE_API = 'http://127.0.0.1:5005/api/v1/manage'

devServer配置代理如下

// devserver 配置如下
devServer: {
host: '127.0.0.1',
port: 8000,
proxy: {
'/api': {
target: '127.0.0.1:5005/',
ws: false,
changeOrigin: true,
pathRewrite: {
// '/api/': '/api/',
        },
      },
    },
  },

但请求时并未通过devServer proxy进行代理, 直接跨域到了5005端口的服务

在查阅了各种复制黏贴的文档后, 终于找到了原因:

const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // api base_url
timeout: 50000, // timeout,
headers: { 'Access-Control-Allow-Origin': '*' },
})

proxy的代理是根据请url求来判断是否使用代理的, 以上axios service 创建时的​​baseURL​​ 使用的是 ​​http://127.0.0.1:5005/api/v1/manage​​, 自然无法匹配​​/api​​的规则, 因此进行如下改动即可

# base ap
VUE_APP_BASE_API = '/api'

到这里终于走代理了, 不过仍然出现 ​​Could not proxy request /api/auth/login from 127.0.0.1:8000 to 127.0.0.1:5005​​ 的问题

将​​target: '127.0.0.1:5005/'​​ 改为​​target: 'http://127.0.0.1:5005/'​​, 即可

标签：

相关文章