vue.js - Vue项目devServer proxy配置不生效的排查方法？

Question

关于跨域配置的问题
如图，我需要调用以下请求访问资源

vue.config.js的配置如下（主要是proxy的配置

const path = require('path')
module.exports = {
  lintOnSave:false,
  runtimeCompiler: true,
  css: {
    loaderOptions: {
      scss: {
        additionalData:`@import "~@/assets/scss/global.scss";`
      }
    }
  },
  chainWebpack: (config) => {
     //svg不编译
     config.module
     .rule('svg')
     .exclude.add(path.join(__dirname, 'src/assets/svg'))
     .end()

    config.module
     .rule('icons')// 定义一个名叫 icons 的规则
     .test(/\.svg$/)// 设置 icons 的匹配正则
     .include.add(path.join(__dirname,'src/assets/svg'))// 设置当前规则的作用目录，只在当前目录下才执行当前规则
     .end()
     .use('svg-sprite')// 指定一个名叫 svg-sprite 的 loader 配置
     .loader('svg-sprite-loader')// 该配置使用 svg-sprite-loader 作为处理 loader
     .options({// 该 svg-sprite-loader 的配置
       symbolId:'icon-[name]'
     })
     .end()
  },
  
  devServer:{
    client:{
      overlay: false
    },
    proxy:{
      '/hie':{
          target:'http://192.168.17.77:7003',
          changeOrigin: true,
      }
    }
  },
}

可能是哪里配错了，但我看不出问题，希望有人能指出
ps：之前看到有帖子说vue2该配置项名为proxyTable，还有devServer应为dev，这两个我都试过了，前者提示没有该配置项

 options has an unknown property 'proxyTable'. These properties are valid:
           object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

后者为vue.config.js的提示：

Invalid options in vue.config.js: "dev" is not allowed

Answer 1

你的项目里需要使用你前端本身的地址，而不是直接使用proxy的地址。

前端项目地址 -> webpack devServer -> 目标proxy地址

你如果直接使用proxy地址，那请求不会经过 devServer。