关于vue.js:vue-项目vueconfigjs-中-devServer-proxy-未生效问题解决方案

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/', 即可