跨域問題處理（已處理IOS兼容問題 ）

問題描述: vue項目使用axios 請求 在 安卓和pc端正常請求 但是在ios（ios12是我們遇到的）上會出現 跨域 預請求失敗 導致 在catch會捕獲 Network error ；

導致問題出現的原因： 是由於header里面帶了很多請求參數，而后端設置的response.setHeader("Access-Control-Allow-Headers", "*");允許所有頭部沒有生效導致。 但是在PC瀏覽器或者安卓手機上，該方式又能生效（煩人的IOS兼容問題，找了好久才找到）。最終通過后台修改跨域配置解決ios請求兼容請問題；

 

改造前：

@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-Methods", "*");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "*");
 
    if (HttpMethod.OPTIONS.toString().equalsIgnoreCase(request.getMethod())) {
        response.setStatus(HttpStatus.NO_CONTENT.value());
    } else {
        filterChain.doFilter(request, response);
    }
}

 

找到問題后，開始對上面的代碼進行了改造，由於項目中不同地方的接口可能header中的某些參數不一致，所以決定采用前端傳了什么header，就在response中設置允許什么header，改造后的代碼如下。

@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-Methods", "*");
    response.setHeader("Access-Control-Max-Age", "3600");
    
    /**cors modified start**/
    StringBuilder headers = new StringBuilder();
    Enumeration<String> headerNames = request.getHeaders("Access-Control-Request-Headers");
    if(Objects.nonNull(headerNames)) {
        while (headerNames.hasMoreElements()) {
            headers.append(headerNames.nextElement()).append(",");
        }
    }
    response.setHeader("Access-Control-Allow-Headers", headers.toString());
    /**cors modified end**/
    
    
    if (HttpMethod.OPTIONS.toString().equalsIgnoreCase(request.getMethod())) {
        response.setStatus(HttpStatus.NO_CONTENT.value());
    } else {
        filterChain.doFilter(request, response);
    }
}

 

 解決問題參考地址：

　　1: https://github.com/axios/axios/issues/1598

　　2: https://blog.csdn.net/biakia0610/article/details/103777597

　　3: https://blog.csdn.net/Daijianshi_123/article/details/102853654