前后端分离项目的跨域问题

一：跨域问题的原因

根本原因：浏览器有同源策略限制，当前域名的js只能读取同城下的窗口属性，这是一个基础安全功能

1.1同源策略 

        若两资源的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 {@Overridepublic 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 responseif (httpRequest.getMethod().equals("OPTIONS"))((HttpServletResponse) res).sendError(HttpServletResponse.SC_OK);chain.doFilter(req, res);}
}

 四：跨域的前端处理