之前的文章vue项目的跨域设置,中提到了vue的跨域设置:
从前端向后台请求“/list”这个地址的时候,在浏览器看到的url前缀是你本地运行服务"localhost:XXXX",但实际上,你请求的地址是'http://api.xxxxxxxx.com'
proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
pathRewrite: {
'^/list': '/list'
}
}
}
当我自己写demo实践的时候,发现报错了,查阅资料后,发现之前的这段代码应该修改为
从前端向后台请求“/list”这个地址的时候,在浏览器看到的url前缀是你本地运行服务"localhost:XXXX/list",但实际上,你请求的地址是'http://api.xxxxxxxx.com/list'
pathRewrite 中的“'^/list',可以理解为你请求的地址,后面的值”/list“,会拼接在你的target值得后面,作为实际请求的地址,对于上面这个例子,当你请求“/list”的时候,浏览器中的请求地址是'http://api.xxxxxxxx.com/list',实际的请求地址是target的值 + '/list'
以上的例子不是真实的接口,那么,我们用一个真实的接口测试一下:
接口名:‘http://ustbhuangyi.com/sell/api’
请求类型: 'get'
请求代码
axios.get('/seller').then((res) => {
可以这样配置
// 正确示例
也可以这样配置
// 正确示例
错误配置,将会报404错误
// 错误示例
感悟:学习理论,不如动手敲代码,踩完坑,对学习的理论就有更深的理解了