遇到问题首先缩小范围确定问题原因。
我用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参数,使用默认设置就可以:
proxy: {
'/fundq': {
target: 'http://192.168.106.88:9888',
changeOrigin: true,
},
}
当修改了vue.config.js中的内容后,一定要重新启动服务yarn start 或者npm run dev之后,修改的内容才会生效