前后端分离跨域问题的几种解决方案
一、为什么会出现跨域问题?
出于浏览器的同源策略限制。
同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port） 。
二、什么是跨域?
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
两个相同的源之间浏览器默认其是可以相互访问资源和操作DOM的。
两个不同的源之间 若想要相互访问资源或者操作DOM，那么会有一套基础的安全策略的制约。
三、解决方案
1.前台服务端解决方案（略）
2、后台服务端解决方案
方法一：@CrossOrigin
注意：
1、springMVC的版本要在4.2或以上版本才支持@CrossOrigin
2、非@CrossOrigin没有解决跨域请求问题，而是不正确的请求导致无法得到预期的响应，导致浏览器端提示跨域问题。
3、在Controller注解上方添加@CrossOrigin注解后，仍然出现跨域问题，
解决方案之一就是：在@RequestMapping注解中没有指定Get、Post方式，具体指定后，问题解决。
其中@CrossOrigin中的2个参数：
origins ： 允许可访问的域列表
maxAge：准备响应前的缓存持续的最大时间（以秒为单位）。
可以配置在Controller上 也可以配置在方法上
*/@CrossOrigin
@RestController
public class person{
@RequestMapping(method = RequestMethod.GET)
public String add() {
// 若干代码
}
}
@RestController@RequestMapping("/account")
public class AccountController {
@CrossOrigin
@GetMapping("/{id}")
public Account retrieve(@PathVariable Long id) {
// ...
}
}
方法二 过滤器
public class CORSFilter implements Filter {
@Override
public void destroy() {
// TODO Auto-generated method stub
}
@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-Methods", "POST, GET, PUT, OPTIONS, DELETE");
//请求得到结果的有效期
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
//: 该值是一个布尔值，表示是否允许发送 Cookie 。默认情况下， Cookie 不包括在 CORS 请求之中，设置为 true，即表示服务器明确许可
response.setHeader("Access-Control-Allow-Credentials", "true");
chain.doFilter(req, res);
}
@Override
public void init(FilterConfig arg0) throws ServletException {
// TODO Auto-generated method stub
}
Web.xml
<!-- 跨域配置 -->
<filter>
<filter-name>SimpleCORSFilter</filter-name>
<filter-class>com.qst.config.CORSFilter</filter-class>
<init-param>
<param-name>IsCross</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>SimpleCORSFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
方法三：配置（SpringBoot）
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS) .maxAge(3600);
}
}
