49版本以后的chrome浏览器怎么处理跨域问题

49版本以后的chrome浏览器怎么处理跨域问题,第1张

1.下载并安装好chorme浏览器后在桌面找到浏览器快捷图标并点击鼠标右键的属性一栏。

2.在属性页面中的目标输入框里加上 --disable-web-security

3.点击应用和确定后关闭属性页面,并打开chrome浏览器。如果浏览器出现提示“你使用的是不受支持的命令标记 --disable-web-security”,那么说明配置成功。

title: 浏览器跨域及其解决方案

author: May

date: 20220428</pre>

什么是跨域跨域的表现解决跨域问题- 浏览器设置(不推荐)- 前端的非正统解决方式- CORS(跨域资源共享)- 配置nginx反向代理

跨域 出于浏览器的同源策略限制, 同源 是指协议、域名、端口都一样, 同源策略(Sameoriginpolicy) 是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。

调用页面时接口数据不返回,控制台中会有红色的报错信息中有类似于 CORS policy 关键字。另外,在最新谷歌浏览器中,会有提出类似于loaded over HTTPS此种关键字,均可以考虑为跨域导致。

[图片上传失败...(image-26deed-1651135597111)]

tips: 有的时候后台小伙伴使用postman测试好的接口,前端不可以使用,原因就是postman不是浏览器,不会有同源限制,同理移动设备app开发和小程序开发也不会有这个问题。这个不是前端bug,同源限制也不是一个不好的规则。

虽然跨域不是一个不好的事情,但是对于前后端分离的web开发来说确实需要解决的,大致的解决方案可分为:

直接从根源解决问题,让浏览器安全策略不起作用。这个方法虽然可以解决问题但是不现实。

官方正统解决方案, CORS规范 允许服务器向浏览器返回一些HTTP Headers,浏览器可以基于这些HTTP Headers来决定是否突破SOP的限制。需要后端配合,浏览器需要什么,接口服务给什么。

nginx是一个高性能的HTTP和反向代理web服务器,nginx用来解决跨域问题的原理与 前端非正统解决方式 的 proxy 的思路是一致的。项目请求接口由nginx服务发出,获取到的数据再经由nginx传递给前端项目,这样前端的请求其实都是由nginx处理的,就没有跨域发生了。

工具

老版本的chrome浏览器;

新版本的chrome浏览器;

说明

新版本的chrome浏览器提高了跨域设置的门槛,原来的方法不再适用,分为两部分介绍一下老、新版本chrome的跨域设置方法。

老版本设置步骤

下载并安装好chorme浏览器后在桌面找到浏览器快捷图标并点击鼠标右键的属性一栏。

在属性页面中的目标输入框里加上   --disable-web-security  如下图所示:

点击应用和确定后关闭属性页面,并打开chrome浏览器。如果浏览器出现提示“使用的是不受支持的命令标记 --disable-web-security”,那么说明配置成功。

新版本设置步骤

在电脑上新建一个目录,例如:C:\MyChromeDevUserData;

属性页面中的目标输入框里加上新目录;

点击应用和确定后关闭属性页面,再次打开chrome,发现有“--disable-web-security”相关的提示,说明chrome又能正常跨域工作了;

首页换成了google的welcome页面,同时原来收藏的链接和历史记录都不见了,而目录下则生成了新的个人信息相关的文件;


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/6041033.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-12
下一篇 2023-03-12

发表评论

登录后才能评论

评论列表(0条)

保存