网站首页 > 教程文章 正文
# 为什么会产生跨域问题
- 浏览器限制,目前所有浏览器都实现了同源策略规范。
- 请求方式Type为xhr。如果非xhr,如json,script则也不会存在跨域问题
- 请求方与服务方的源不同,即跨域,包括:
- 协议不同
- 域名不同
- 端口不同
同时满足三个条件才有可能产生跨域问题。
# 解决方案
- 对于浏览器限制的解决方案-关闭浏览器的同源策略检查
- --args--disable-web-security--user-data-dir设置浏览器的启动参数,将浏览器的同源策略取消。该方式要求所用的用户进行手动操作,肯定是不现实的。
- 请求方式Type为xhr的解决方案既然只有Type为xhr的请求才会存在跨域请求,那么我们是不是可以换一种请求方式呢。Jsonp的实现就是这样。将原本Type是xhr的请求伪造成script请求。Jsonp的请求路径后面会自动带上callback参数,服务端可据此判断是否是jsonp请求,将返回值以script的形式进行封装。且服务端需要进行相应的改动。
对于SpringBoot项目
@ControllerAdvicepublic
class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{
public JsonpAdvice{
super("callback"); //约定的jsonp请求参数
}
}
JQuery实现jsonp的原理:
动态创建一个script,通过这个script去请求,请求完,该script即被销毁。可通过对jQuery打断点的方式验证。(可以看到JQuery在网页源代码嵌入了一个临时的script,当Jsonp请求完成之后,该Script即被销毁)
- 弊端:
- 服务器需要改动
- 只支持GET方式 (因为获取script都是GET方式,前端指定请求方式也无效,还以GET方式发起的请求)
3. 对于域不同的解决方案
根据实际系统架构来决定使用哪种方式
- 被调用方解决返回的响应头的包含允许跨域访问的信息,需要被调用方进行代码的修改。(可由具体应用添加允许跨域信息,也可以由容器,Tomcat,jetty等添加)
- 通过Filter实现
- 将允许跨域请求的信息配置在nginx或者apache转发服务器
2. 调用方解决
在调用方与被调用方中间再增加一层,该层做转发,将调用方的请求转发到被调用方。其中第一点因为调用方与该转发层在同一个域名下,所以不会有跨域问题。第二点,由于不是浏览器发起的请求,所以转发层调用被调用方也是不存在跨域问题的(参见跨域的三要素)。
简单请求与非简单请求
当浏览器发起一个跨域请求的时候会先判断是简单请求还是非简单请求。
对于简单请求,浏览器会先请求,拿到结果后再判断是否跨域。
对于非简单请求,浏览器会先发起一个预检options请求,检查通过之后再发起实际的请求。
对于带cookie的跨域请求,
- 需要将allowedOrigins设置为具体的origin,而不能使用 *。
- 需要设置响应参数 allowCredentials(true),允许带cookie的跨域
- 上一篇: 跨域问题是怎样造成的?
- 下一篇: 什么是跨域以及如何解决?通俗易懂带你彻底搞定
猜你喜欢
- 2025-01-08 跨域调任不妨多些释因
- 2025-01-08 深入跨域 - 解决方案
- 2025-01-08 跨域问题?同源策略大全
- 2025-01-08 Spring Boot 进阶-Spring Boot中如何解决跨域问题
- 2025-01-08 SpringBoot 如何解决跨域问题?
- 2025-01-08 解决跨域问题的8种方法,含网关、Nginx和SpringBoot~
- 2025-01-08 一文带你理清同源和跨域
- 2025-01-08 前端:何为跨域,如何跨域
- 2025-01-08 最常用的四种跨域解决方案
- 2025-01-08 图片跨域小记
- 06-18CentOS7安装Mongodb 4.x.x(centos7安装openstack)
- 06-18Window环境配置Mongodb(mongodb默认配置文件路径)
- 06-18FineReport如何连接和使用MongoDB数据库
- 06-18nosql之mongodb(nosql怎么读正确发音)
- 06-18Mongodb centos7安装(mongodb4.4.2安装教程)
- 06-18群晖(Synology)NAS 安装 MongoDB(群晖安装nat123)
- 06-18MongoDB 安装及实践(mongodb的安装过程和操作命令)
- 06-18MongoDB最全详解(万字图文总结)(mongodb lsm)
- 最近发表
-
- CentOS7安装Mongodb 4.x.x(centos7安装openstack)
- Window环境配置Mongodb(mongodb默认配置文件路径)
- FineReport如何连接和使用MongoDB数据库
- nosql之mongodb(nosql怎么读正确发音)
- Mongodb centos7安装(mongodb4.4.2安装教程)
- 群晖(Synology)NAS 安装 MongoDB(群晖安装nat123)
- MongoDB 安装及实践(mongodb的安装过程和操作命令)
- MongoDB最全详解(万字图文总结)(mongodb lsm)
- CentOS安装MongoDB教程(centos安装mpich)
- MongoDB入门指南:下载、安装和配置一款强大的NoSQL数据库
- 标签列表
-
- location.href (44)
- document.ready (36)
- git checkout -b (34)
- 跃点数 (35)
- 阿里云镜像地址 (33)
- qt qmessagebox (36)
- mybatis plus page (35)
- vue @scroll (38)
- 堆栈区别 (33)
- 什么是容器 (33)
- sha1 md5 (33)
- navicat导出数据 (34)
- 阿里云acp考试 (33)
- 阿里云 nacos (34)
- redhat官网下载镜像 (36)
- srs服务器 (33)
- pico开发者 (33)
- https的端口号 (34)
- vscode更改主题 (35)
- 阿里云资源池 (34)
- os.path.join (33)
- redis aof rdb 区别 (33)
- 302跳转 (33)
- http method (35)
- js array splice (33)