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問題了。