Vue2使用proxy跨域问题:‘http://localhost:8888‘ has been blocked by CORS policy:
第一次进行vue的框架搭建,遇到了太多的坑,只能一边跳坑,一边填坑,希望最后别把自己给埋了。以下是在使用proxy代理设置跨域时的问题:解决方法:在src/utils/request.js文件中将baseURL注释掉便可以,因为既然已经配置代理了,axios就不需再设置baseURL了,不然就不会经过代理处理。// create an axios instanceconst servi...
·
第一次进行vue的框架搭建,遇到了太多的坑,只能一边跳坑,一边填坑,希望最后别把自己给埋了。
以下是在使用proxy代理设置跨域时的问题:
解决方法:
在src/utils/request.js文件中将baseURL注释掉便可以,因为既然已经配置代理了,axios就不需再设置baseURL了,不然就不会经过代理处理。
// create an axios instance
const service = axios.create({
//baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
再说一下proxy代理设置
vue.config.js文件:
module.exports = {
lintOnSave: process.env.NODE_ENV === 'development',
devServer: {
port: port,
open: true,
https: false,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/oraflapi': {
target: process.env.VUE_APP_BASE_ORAFLAPI, // 目标 API 地址
changeOrigin: true, // 允许websockets跨域
ws: true,
pathRewrite: {
'^/oraflapi': '/oraflapi'
}
},
'/bsw': {
target: process.env.VUE_APP_BASE_BSW ,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/bsw': '/bsw'
}
},
'/oraflfile': {
target: process.env.VUE_APP_BASE_ORAFLFILE ,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/oraflfile': '/oraflfile'
}
},
},
},
}
.env.development文件:
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_ORAFLAPI = 'http://10.6.132.113:8080'
VUE_APP_BASE_BSW = 'http://10.6.132.113:8100'
VUE_APP_BASE_ORAFLFILE = 'http://10.6.132.113:8263'
VUE_CLI_BABEL_TRANSPILE_MODULES = true
api.js文件中调用接口:
import request from '@/utils/request'
export function fetchList(data) {
return request({
url: '/oraflapi/queryAssetListPage',
method: 'post',
data
})
}
以上就是本次遇到的问题了。如果您觉得解决了问题,可以给我一个赞以示鼓励呀,共勉。
更多推荐
已为社区贡献9条内容
所有评论(0)