企业网站建设的成本构成,网站开发读什么专业,wordpress仿站教学,广州市地图先叠个甲,有错误,望沟通指正! 文章目录 1.什么是跨域报错2.为什么postman可以,浏览器访问就不行?根本原因是什么?2.1浏览器是依据什么来报错跨域的? 3.常规解决方案的分析方案1.通过代理解决方案2.被请求的B域的服务端开启Access-Control-Allow-Origin返回头的支持方案3.通…先叠个甲,有错误,望沟通指正! 文章目录 1.什么是跨域报错2.为什么postman可以,浏览器访问就不行?根本原因是什么?2.1浏览器是依据什么来报错跨域的? 3.常规解决方案的分析方案1.通过代理解决方案2.被请求的B域的服务端开启Access-Control-Allow-Origin返回头的支持方案3.通过设置浏览器关闭同源策略来实现访问互通 4.对比3种方案 1.什么是跨域报错 has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 类似上面的报错 ,就是出现了跨域限制访问问题
2.为什么postman可以,浏览器访问就不行?根本原因是什么?
同源策略Same-Origin Policy,这个是浏览器的一个策略.也就是在A的域 去请求B域的资源,是不被浏览器允许的 这一种存在于浏览器上的安全策略,所以你用edge还是chrome,都会出现这个问题.而使用postman则没有. 抛出这个报错的根源在于浏览器
2.1浏览器是依据什么来报错跨域的?
并不是只通过IP来判断是否跨域报错的. 这里还涉及到一个参数就是Access-Control-Allow-Origin.如果请求B域的时候,返回的header带有这个参数.那么也是被浏览器允许的(可以通过同源策略的安全限制)
B域的服务,返回头中是否带有Access-Control-Allow-Origin,取决于B域的后台服务的代码中,是否开启了相关功能. 具体JAVA GOLANG PYTHON C#,如何开启Access-Control-Allow-Origin ,可以全网搜一下 ,不赘述了
也就是B域的服务端,开启了Access-Control-Allow-Origin,那么所有浏览器都可以跨域访问呢这个资源
3.常规解决方案的分析
方案1.通过代理解决
也就是最常见到的,在使用vue-admin-templete等前端分离项目开发时,咱们在vue.config.js里面配置的proxy 类似这样
devServer: {port: port, //服务器 是A域open: true,overlay: {warnings: false,errors: true},before: require(./mock/mock-server.js),proxy: {/dev-api/vat:{target:http://B域:8080,changeOrigin: true,}}},结论: 核心原理也就是转发. ,对于浏览器来说,访问/dev-api/vat的时候,实际上确实是访问服务器的/dev-api/vat资源. 但是服务器在后台启动了一个代理,将/dev-api/vat资源转发给了B域. 因为是代理服务发起给B域的,所以没有同源策略的限制.代理服务自然能够成功收到B域的返回. 接下来代理服务将结果返回给浏览器(这里对于浏览器来说,代理服务和A域 是同源的 所以没有报错)
方案2.被请求的B域的服务端开启Access-Control-Allow-Origin返回头的支持
具体JAVA GOLANG PYTHON C#,如何开启Access-Control-Allow-Origin ,可以全网搜一下 ,不赘述了 也就是B域的服务端,开启了Access-Control-Allow-Origin,那么多有浏览器都可以跨域访问呢这个资源
方案3.通过设置浏览器关闭同源策略来实现访问互通
以chrome为例 ,在快捷方式–属性–目标这里,追加参数 --disable-web-security --user-data-dir用户数据目录 即可
例如 C:\Program Files\Google\Chrome\Application\chrome.exe --disable-web-security --user-data-dirC:\temp
此时 打开chrome将不再受跨域的束缚,但是会提示你安全性降低
4.对比3种方案
方案1-代理方案2-服务端代码放开方案3-浏览器关闭同源策略安全性相对 高相对 中相对 低方便性相对 中相对 中相对 高使用场景开发调试多个服务继承部署开发调试多个服务继承部署生产多环境调用无所不能调用区别前端所在的服务器去调用B域可以在浏览器访问端直接调用B域随便搞
