描述
一般请求的url地址与项目所在地址不一致便会触发跨域请求,若没有跨域措施,一般会抛出No 'Access-Control-Allow-Origin' 错误
解决方案
解决方案就是更改配置文件 vue.config.js,在 devServer 下配置 proxy
devServer: {
proxy: {
'/api': {
target: 'https://xxx/', //要跨域请求的地址url
changeOrigin: true,
pathRewrite: {
'^/api': '' //重写的路径
}
}
}
之后再axios请求时直接写
axios.get('/api' + '/product/list')
这样的形式就可以了
大体理解就是 axios 请求时,遇到 /api 就替换为 https://xxx/ ,请求路径就是 pathRewrite,这里是空。所以调用/api,就相当于调用
https://xxx/
若改成
devServer: {
proxy: {
'/api': {
target: 'https://xxx', //要跨域请求的地址url
changeOrigin: true,
pathRewrite: {
'^/api': '/' //重写的路径
}
}
}
最终结果一样
其他问题
'/createapi': {
target: 'http://localhost:8080/sell/buyer/',
changeOrigin: true,
pathRewrite: {
'^/createapi': ''
}
}
有时候明明设置了代理,请求还是如此,但实际上,已经正确请求了,只是这样显示,不知道为何