解读前后端分离项目的跨域问题
更新时间：2024年11月28日 16:48:48 作者：又菜又爱玩的晴晴
文章介绍了跨域问题的原因——浏览器的同源策略限制,以及CORS（跨域资源共享）的概念,CORS通过服务器设置特定的响应头来允许跨域请求,文章还概述了后端解决跨域问题的几种方式,并简要介绍了前端处理跨域请求的方法
跨域问题的原因
根本原因：浏览器有同源策略限制，当前域名的js只能读取同城下的窗口属性，这是一个基础安全功能
同源策略
若两资源的URL中的协议、域名、端口都相同就成为同源，如果两资源不同源，则不允许共享资源。
例如：http://www.baidu.com/a/hello.html
| 请求地址 | 结果 | 原因 |
http://www.baidu.com/a/java.html | 成功 | 同一域名端口，相同文件夹 |
http://www.baidu.com/b/hello.html | 成功 | 同一域名端口，不同文件夹 |
https://www.baidu.com/a/hello.html | 失败 | 不同协议，http与https |
http://www.baidu.com:8081/a/java.html | 失败 | 不同端口，默认为8080端口 |
| http://www.sina.com:8081/a/java.html | 失败 | 不同域名 |
跨域CORS
跨域就是解决不同域之间可以进行资源的相互访问，为了避开浏览器的同源政策
CORS出现之前
浏览器接收到服务器回复—>检查是否同源—>同源就响应，不同源就拒绝相应
CORS出现之后
浏览器接收到服务器回复 --> 检查一下response header --> 发现有特定字段Access-Control-Allow-Origin --> 检查这个header后面的值包不包含自己所在的域（打比方我们现在在www.baidu.com），浏览器检查发现后response header里面写的有Access-Control-Allow-Origin: https://www.baidu.com, 并且https://www.google.com正好我们在允许的域里面！ --> 浏览器响应服务器返回的数据(response)。
浏览器要实现的内容：
- 接收到服务器的回复之后检测回复头里面是否含有特定字段！
- 有的话查看自己的域名是否在内，一定要这两个条件都符合！
- 浏览器才会接受（或者说响应）服务器返回的回复！
服务器需要实现的内容：
- 服务器需要在接受到浏览器发来的请求（request）后，在返回response之前！
- 设置header，在header中里面包含特定字段，以便浏览器收到回复之后可以去检查，有字段证明服务器同意服务这个网站，浏览器就可以接受回复，没有字段或者字段的值不包含发送请求的网站，浏览器就不会响应回复内容！
后端解决跨域问题的几种方式
第一种：在application文件里
第二种：在配置类里加上注解
第三种：在过滤器里设置
@WebFilter(filterName = "CorsFilter ")
@Configuration
public class CorsFilter implements Filter {
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
HttpServletRequest httpRequest = (HttpServletRequest) req;
// OPTIONS method response
if (httpRequest.getMethod().equals("OPTIONS"))
((HttpServletResponse) res).sendError(HttpServletResponse.SC_OK);
chain.doFilter(req, res);
}
}
跨域的前端处理
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Eclipse 项目出现错误（红色叹号）解决方法的相关资料,需要的朋友可以参考下2017-06-06
SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理。因此，本文将为大家介绍如何通过SpringMVC实现网页登录拦截功能，需要的小伙伴可以了解一下2021-12-12
文章主要介绍了Spring和Nacos对`@RefreshScope`注解的处理方式,Spring在每次调用被`@RefreshScope`注解的bean的属性时,会先从本地缓存获取,如果缓存不存在则重新创建并获取最新环境配置2024-12-12
策略模式属于Java-设计模式中行为模式之一，该模式定义了一系列算法，并将每个算法封装起来，使它们可以相互替换。本文将通过示例详细讲解这一模式，需要的可以参考一下2022-11-11
这篇文章主要介绍了Intellij IDEA 关闭和开启自动更新的提示操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-04-04
文章详细介绍了Spring Cloud Config配置中心的命名空间、配置集、配置集ID、配置分组以及如何在微服务中加载和使用这些配置,通过配置中心,可以实现配置隔离和集中管理,简化微服务的配置维护2024-12-12
TCP/IP是一种面向连接的、可靠的、基于字节流的传输层通信协议，它会保证数据不丢包、不乱序。TCP全名是Transmission Control Protocol，它是位于网络OSI模型中的第四层2022-11-11
下面小编就为大家分享一篇基于JVM 中常见垃圾收集算法介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
解决Maven 项目报错 java.httpservlet和synchronized使用方法
下面小编就为大家带来一篇解决Maven 项目报错 java.httpservlet和synchronized使用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
我们在开发 REST API 的过程中,经常需要传递参数,本文主要介绍了SpringBoot中REST API 接口传参的实现,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
最新评论