如何解决跨域问题

今天药忘吃喽~ 2023-09-25 18:24 68阅读 0赞

### 如何解决跨域问题 ###

*  什么是跨域请求？
 *  重写addCorsMappings函数的原理
 *  和解决方案JSONP的对比
 *  GET请求的跨域流程
 *  DELETE请求的处理过程
 *   *  第一步
     *  第二步
 *  实践

# 什么是跨域请求？ #

跨域请求，就是说浏览器在执行脚本文件的ajax请求时，脚本文件所在的服务地址和请求的服务地址不一样。说白了就是ip、网络协议、端口都一样的时候，就是同一个域，否则就是跨域。

# 重写addCorsMappings函数的原理 #

CORS(Cross-Origin Resource Sharing)是一种**跨域资源共享技术标准**，其目的是为了解决前端的跨域请求。

# 和解决方案JSONP的对比 #

在Java EE开发中，最常见的前端跨域请求解决方案是JSONP, 但是JSONP只支持GET请求。

相比之下，CORS则支持多种HTTP请求方法。

# GET请求的跨域流程 #

响应头中有一个Access-Control-Allow-Origin字段，用来记录可以访问该资源的域。当浏览器收到这样的响应头信息之后，提取出Access-Control-Allow-Origin字段中的值，发现该值包含当前页面所在的域，就知道这个跨域是被允许的。

POST和HEAD请求同理。

# DELETE请求的处理过程 #

## 第一步 ##

发送一个OPTIONS请求，代码如下：  
![在这里插入图片描述][261713ec72884823aa07ab4341cb062b.png]  
这个请求询问服务端是否具备该资源的DELETE权限，服务端会给浏览器一个响应：  
![在这里插入图片描述][b1399b3d017a462b8c4d26bc4bf1b2df.png]  
Allow头信息表示服务端支持的请求方法，支持则进入第二步。

## 第二步 ##

浏览器发送DELETE请求，代码如下：  
![在这里插入图片描述][37b2853de36e4549b784a96f8bef7f14.png]  
服务端给的响应：  
![在这里插入图片描述][93d18d8cec2b4132ab54426d287ee8c9.png]

# 实践 #

在传统的Java EE开发中，可以通过过滤器统一配置，而Spring Boot中对此则提供了更加简洁的解决方法（通过配置CORS来完成）：通过重写WebMvcConfigurer的addCorsMapping方法实现后台服务解决跨域问题。

***参考资料***：

1.  [SpringBoot中重写addCorsMapping解决跨域][SpringBoot_addCorsMapping]
2.  [springboot配置cors跨域原理与实践][springboot_cors]
3.  [SpringBoot实现配置跨域请求][SpringBoot]

[261713ec72884823aa07ab4341cb062b.png]: https://img-blog.csdnimg.cn/261713ec72884823aa07ab4341cb062b.png
[b1399b3d017a462b8c4d26bc4bf1b2df.png]: https://img-blog.csdnimg.cn/b1399b3d017a462b8c4d26bc4bf1b2df.png
[37b2853de36e4549b784a96f8bef7f14.png]: https://img-blog.csdnimg.cn/37b2853de36e4549b784a96f8bef7f14.png
[93d18d8cec2b4132ab54426d287ee8c9.png]: https://img-blog.csdnimg.cn/93d18d8cec2b4132ab54426d287ee8c9.png
[SpringBoot_addCorsMapping]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/127011172
[springboot_cors]: https://blog.csdn.net/qq_34626094/article/details/122992842
[SpringBoot]: https://www.cnblogs.com/cy0628/p/15146337.html