浏览器控制台报错
Access to XMLHttpRequest at 'http://xxx.xxx.xxx.xx:8080/app/easypoi/importExcelFile' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
问题分析:
这是常见的跨域请求问题,在前后端分离的项目中常见,前端项目中的请求路径直接用后台请求路径(例如:http://xxx.xxx.xxx.xx:8080/demo/getUser.do),但根据浏览器的网络请求规则,后台Server是不允许这样直接调用的(会被当黑客恶意攻击给拦截掉)。从而导致该跨域请求被拒绝。
第一步
设置 代理根域名
第二步 设置代理 proxy
代理方法一: manifest.json中设置
"h5": {
"devServer" : {
"https" : false,
// "port":"9011", //端口号
"proxy": {
"/host": { // 接口请求中 从 /host 这里 进行代理
target: 'http://XXX.XXX.XXX.XX:9011', //这里后台的地址模拟的;应该填写你们真实的后台接口
"changeOrigin": true, // 允许跨域
"secure": false,
"pathRewrite": {
"^/host": "" // 重定向 为空
}
}
}
},
}
代理方法二: vue.config.js中设置
在devServer{}内加入代理
module.exports = {
// 配置路径别名
configureWebpack: {
devServer: {
// 调试时允许内网穿透,让外网的人访问到本地调试的H5页面
disableHostCheck: true,
// port: '9011', //端口号
proxy: {
'/host': { // 接口请求中 从 /host 这里 进行代理
target: 'http://XXX.XXX.XXX.XX:9011', //这里后台的地址模拟的;应该填写你们真实的后台接口
changeOrigin: true, // 允许跨域
pathRewrite: {
'^/host': '' // 重定向 为空
}
}
}
}
}
// productionSourceMap: false,
}