vue访问出现跨域错误
报错Access to XMLHttpRequest at 'http://localhost:82/checkitem/findAll.do' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
问题:
因为浏览器的同源策略的限制问题(协议、主机、端口一致),浏览器访问非同源的网址时,会出现无法获取数据(已发请求,服务器已收到请求),出现跨域问题
3种解决方法
1、cors跨域(配置服务器) :
全称 “跨域资源共享”,原理:它允许浏览器向跨源服务器,发出XMLHttpRequest请求(配置响应头Accesse-Control-Allow-Origin:"*",违背任意一条同源策略都能访问响应数据),从而克服了AJAX只能同源使用的限制。
缺点:这样会造成任何人都能向这台服务器要数据。
2、jsonp跨域:
原理:动态生成script标签,通过src引入接口地址(因为src不存在跨域的);请求数据类型dataType为jsonp,缺陷只支持get请求,且存在一些安全隐患
3、代理服务器:
借助vue-cli脚手架开启代理服务器,在vue.config.js文件中配置proxy,原理:先请求本地服务器,本地服务器再去请求真正的后台服务器,最后本地服务器再将请求回来的数据返回给浏览器(本地服务器跟浏览器之间不存在跨域)
配置多个代理代码:
devServer: {
proxy: {
//灵活代理;请求前缀为/api时,走下面的代理
'/api': {
target: 'url',//代理服务器把请求转发给url(真正的后台服务器)
ws: true,//用于支持websocket
changeOrigin: true,//用于控制请求头中的host值
//真正的服务器没有/api,所以要重写路径置空,否则找不到相应的路径
pathRewrite: {
//匹配以api开头的路径置空
'^api': ''
}
},
//配置多个代理;请求前缀为/demo时,走下面的代理
'/demo': {
target: 'url2',//代理服务器把请求转发给url2(真正的后台服务器)
ws: true,//用于支持websocket
changeOrigin: true,//用于控制请求头中的host值
//真正的服务器没有/api,所以要重写路径置空,否则找不到相应的路径
pathRewrite: {
//匹配以api开头的路径置空
'^demo': ''
}
},
}
}
本文作者:又一岁荣枯
本文链接:https://www.cnblogs.com/java-six/p/16516547.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步