【vue】配置代理解决跨域详细篇--Access to XMLHttpRequest at ’http:xx‘ from origin’http:xx‘has been blocked by CORS
报错解释:
这个报错信息表明你正在使用XMLHttpRequest对象进行HTTP请求,但是浏览器由于同源策略(Same-origin policy)阻止了这次请求。在这种情况下,你遇到了跨域问题(CORS,Cross-Origin Resource Sharing)。
报错中的URL(例如 'http:xx')是你尝试访问的资源地址,但是报错信息不完整,没有显示完整的URL或者具体的错误信息。
解决方法:
- 配置Vue项目中的开发服务器,设置代理服务器,将API请求代理到目标服务器,从而绕过同源策略。
例如,如果你使用的是Vue CLI创建的项目,可以在项目的 vue.config.js
文件中配置devServer的代理选项:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://target-server.com', // 目标服务器地址
changeOrigin: true, // 改变源地址
pathRewrite: {
'^/api': '' // 重写路径
}
}
}
}
};
在这个配置中,当你访问 /api
开头的路径时,所有的请求都会被代理到 http://target-server.com
。changeOrigin
设置为 true
可以让代理服务器把接收到的请求的 Host
头部改成目标服务器的地址,这样目标服务器就会认为请求是来自原始域的。pathRewrite
用于重写请求路径,去除 /api
前缀。
- 如果你不能控制服务器端的CORS策略,那么你需要服务器端添加适当的CORS头部,允许你的前端应用程序进行跨域请求。
以上解决方案需要确保你了解安全性问题,不要随意代理不信任的服务器,以免造成安全风险。
评论已关闭