CORS问题的处理策略

　　1、问题现象

　　在浏览器的控制台出现这样的信息： Access to XMLHttpRequest at 'http://yyyy' from origin 'http://zzzz' has been blocked by CORS policy: Request header field xxxx is not allowed by Access-Control-Allow-Headers in preflight response.

         在浏览器的Network页签中出问题的接口所对应的请求头出现这样的提示信息：

         

　　在上图中“Provisional headers are shown”是指显示了临时的请求头，这种现象的产生是当浏览器第一次发送这个请求时请求被阻塞，并未收到响应；而浏览器再次发送这个请求时，由于上一个同样的请求都还没有收到响应，此时浏览器就会给前一个请求报这个警告。总之来说，就是请求并没有发送出去。

　　2、问题分析

　  （1）CORS是什么？它的英文全程是cross-origin resource sharing，中文的意思是跨域资源共享；它是一种W3C标准，允许浏览器向跨源服务器发起XHR请求。

      （2）既然标准允许跨域，但是浏览器不支持；此时，还是需要从后端服务方面来解决。

      （3）解决跨域的本质就是需要响应头中添加支持的类型，可以在响应头字段Access-Control-Allow-Origin或者Access-Control-Allow-Headers的中填写请求头所有字段，当然最简单粗暴的方式就是给响应头的这两个字段赋值为"*"。

　　3、问题处理

         在后端添加这样这一个文件

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang3.StringEscapeUtils;
import org.springframework.boot.web.servlet.ServletComponentScan;
import org.springframework.stereotype.Component;

@Component
@ServletComponentScan
@WebFilter(urlPatterns = "/*", filterName = "httpFilter")
public class HttpFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) {
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Headers", "*");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {
    }
}

        4、处理效果

         经过上述处理后，前端再次发起请求时没再出现CORS问题了。