解读前后端分离项目的跨域问题
作者：又菜又爱玩的晴晴
文章介绍了跨域问题的原因——浏览器的同源策略限制,以及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);
}
}
跨域的前端处理
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。