浏览器跨域及其解决方案

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是一款非常优秀的浏览器，尤其在网页调试方面出类拔萃，深得本人的喜欢。但是在使用的过程中，总有一些问题会困扰大家，现将一些常见问题及解决方案列举出来，供参考。

1. Chrome下遇到该网页已屏蔽插件adobe flash player的解决办法

适合以下情形：

（1）确定在电脑上确实已经安装了 Adobe Flash Player 插件

（2）打开网页时仍然提示"已屏蔽 Adobe Flash Player 插件"

解决办法：

（1）打开 chrome://settings/content，在内容设置—Flash选项中，把插件设置更改为"允许网站运行Flash"。

修改完记得重启浏览器，如果仍然提示 Adobe Flash Player 插件被屏蔽，请移步步骤（2）。

订阅专栏解锁

查看专栏

大码凉鞋

精选推荐

广告

算法导论第1-16章编程题答案

38下载·1评论

2016年8月21日

Chrome浏览器解决问题合集6.7

271阅读·0评论·0点赞

2021年6月7日

关于2022年10月谷歌浏览器无法使用翻译功能的解决办法

7446阅读·10评论·5点赞

2022年10月10日

谷歌浏览器无法上网，其他浏览器正常，换chrome搜索引擎

4277阅读·0评论·0点赞

2022年4月20日

Ubuntu20.04 安装Chrome浏览器后，Chrome浏览器搜索的信息显示异常

197阅读·0评论·0点赞

2022年7月31日

chrome谷歌浏览器视频播放报错：No compatible source was found for this media解决方法

9294阅读·1评论·0点赞

2020年11月28日

弈城围棋手机版

精选推荐

广告

webbrowser模块使用—用chrome打开页面

1.5W阅读·3评论·0点赞

2013年12月8日

为什么浏览器发送请求会报：Cannot get ....

657阅读·0评论·0点赞

2021年9月13日

用谷歌浏览器播放audioSource的坑

1.6W阅读·6评论·2点赞

2019年5月26日

关于谷歌浏览器全线崩溃的原因及几种解决办法（疑难杂症篇）

2.4W阅读·0评论·6点赞

2020年10月16日

chrome升级后无法访问iframe页面

1157阅读·0评论·0点赞

2020年11月24日

Chrome谷歌浏览器重启后就同步暂停怎么办

5782阅读·2评论·1点赞

2020年3月11日

解决chrome无法打开某些网站的问题

2.4W阅读·0评论·1点赞

2019年4月12日

关于谷歌浏览器显示隐私设置错误的解决方案

5.4W阅读·3评论·3点赞

2017年4月18日

关于 input在 chrome 、IE浏览器中遇到的兼容性问题处理

800阅读·0评论·0点赞

2021年5月12日

chrome 搜索默认设置_如何将Chrome设置重置为默认设置

645阅读·0评论·0点赞

2020年9月17日

【问题解决手记】通过设置chrome浏览器(谷歌浏览器)解决前端跨域问题

2.5W阅读·1评论·3点赞

2018年5月14日

程序调用chrome遇到的问题

765阅读·0评论·0点赞

2018年11月29日

去首页

看看更多热门内容

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

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

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

---