vue2中使用proxy遇到问题：Uncaught (in promise) Error: Request failed with status code 404

报错信息：

遇到问题首先缩小范围确定问题原因。

我用 postman 调接口有正确的返回值，说明与后台无关，肯定是前端配置问题；报404那有可能是接口问题，查询接口是否正确，嗯？……我查不出来！查询请求头信息，发现请求地址是正确的，这里就触及到了我的知识盲点：pathRewrite的使用。

控制台
Request URL: http://localhost:8888/fundq/queryAssetListPage
Request Method: POST

首先与后台通信需要将 main.js 中使用到mock的信息注释掉，因为 axios 与 mock 会有冲突。

import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n
import '@/styles/index.scss' // global css
import App from './App'
import store from './store'
import router from './router'
import '@/icons' // icon
// import '@/permission' // permission control

//以下代码注释
// import { mockXHR } from '../mock'
// if (process.env.NODE_ENV === 'production') {
//   mockXHR()
// }

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

以下为我在 vue.config.js 文件中设置的 proxy 代理的代码片段：

 proxy: {
   '/fundq': {
     target: 'http://192.168.106.88:9888',	// 目标地址
     changeOrigin: true,					// 是否跨域，默认false
     ws: true, 								// 是否代理websockets
     pathRewrite: {							// 重写路径
       '^/fundq': ''   						// 此处为问题原因，正确写法应为： '^/fundq': '/fundq'
     }
   },
 }

解释一下原因：

首先，在 proxy 模块中设置了 “/fundq”，target 中设置服务器地址+端口号，然后我们在调用接口的时候，就可以全局使用"/fundq"，这时候"/fundq"的作用就相当于一个唯一标识，比如接口地址是 http://192.168.106.88:9888/fundq/queryAssetListPage，那我们在调用接口时可以直接写为 /fundq/queryAssetListPage ，系统会自动识别 proxy 中 /fundq 标识中的 target 地址并拼接在一起。

那 pathRewrite 是用来干嘛的呢，这里的作用相当于是替换 “/fundq”，如果接口中没有 “/fundq”，那就直接置空，就像我上面代码一样，但是我的接口中有 “/fundq”，这时候我置空后真实的地址就变成了 http://192.168.106.88:9888/queryAssetListPage，与真实接口不一致，这就导致了找不到接口，所以报404错误；如果接口中有"/fundq"，那就得写成 {"^/fundq": "/fundq"}。

pathRewrite 的作用就是重写路径，可以将路径重置为任何值，也可以为空。

还有一种解决办法就是不设置pathRewrite参数，使用默认设置就可以：

 proxy: {
   '/fundq': {
     target: 'http://192.168.106.88:9888',
     changeOrigin: true,
   },
 }

当修改了vue.config.js中的内容后，一定要重新启动服务yarn start 或者npm run dev之后，修改的内容才会生效。