前言
当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。
比如，站点 http://domain-a.com 的某 HTML 页面通过 的 src 请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。
出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非使用CORS头文件。
引自： https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
后台配置跨域的解决方案
方法一：通过实现WebMvcConfigurer类
/**
* <p>Package:com.kingdom.vbdemo.common.config</p>
* <p>Title: CrosConfig</p>
* <p>Description: 跨域请求配置</p>
*
* @author Kingdom.Chen
* @datetime 2018/10/11 15:49
*/
@Configuration
@EnableWebMvc
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 设置允许跨域的路径
.allowedOrigins("*") // 设置允许跨域请求的域名
.allowCredentials(true) // 是否允许证书 不再默认开启
.allowedMethods("GET", "POST", "HEAD", "PUT", "PATCH", "DELETE") // 设置允许的方法
.maxAge(3600); // 允许跨域的时长
}
}
方法二：通过注册一个Filter类
/**
* <p>Package:com.kingdom.vbdemo.common.filter</p>
* <p>Title: CorsFilter</p>
* <p>Description: Cors 跨域过滤器</p>
*
* @author Kingdom.Chen
* @datetime 2018/10/12 9:51
*/
//@Component
public class CorsFilter implements Filter{
Logger logger = LoggerFactory.getLogger(CorsFilter.class);
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
HttpServletRequest httpServletRequest = (HttpServletRequest) request;
HttpServletResponse httpServletResponse = (HttpServletResponse) response;
// 从请求头中获取header
String origin = httpServletRequest.getHeader("origin");
httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
httpServletResponse.setHeader("Access-Control-Allow-Origin", origin);
httpServletResponse.setHeader("Access-Control-Allow-Methods", "GET, POST, HEAD, PUT,PATCH, DELETE");
httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
httpServletResponse.setHeader("Access-Control-Allow-Headers", "x-requested-with");
// 接受跨域的cookie
httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
chain.doFilter(request, response);
}
@Override
public void destroy() {
}
}
