cors跨域中關于access-control-allow-headers導致的錯誤

cors.png

1、詳細錯誤信息是:

Access to XMLHttpRequest at '[http://appservice.wogame-dev.com/h5/game/getCdkDetail](http://appservice.wogame-dev.com/h5/game/getCdkDetail)' from origin '[http://app.wogame-dev.com](http://app.wogame-dev.com)' has been blocked by CORS policy: Request header field wg-token is not allowed by Access-Control-Allow-Headers in preflight response.

抓包查看http請求和響應,發現已允許跨域。說明跨域設置是成功了,只是HTTP Header缺少了一個字段,導致的報錯。


11_30_08__12_07_2018.jpg

2、這里貼出java源碼:

import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 【跨域攔截器】
 */
@Configuration
public class CorsInterceptor extends HandlerInterceptorAdapter {

    @Value("${service.corsOrigin}")
    private String corsOrigins = "http://app.wogame-dev.com";

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

        String origin = request.getHeader("Origin");

        if (StringUtils.isNotBlank(origin) && corsOrigins.contains(origin)) {
            response.setHeader("Access-Control-Allow-Origin", origin);
            response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, " +
                    "WG-App-Version, WG-Device-Id, WG-Network-Type, WG-Vendor, WG-OS-Type, WG-OS-Version, WG-Device-Model, WG-CPU, WG-Sid, WG-App-Id, WG-Token");
            response.setHeader("Access-Control-Allow-Methods", "POST, GET");
            response.setHeader("Access-Control-Allow-Credentials", "true");
        }
        /**設備默認值**/
        response.setContentType("application/json;charset=UTF-8");

        return true;
    }


    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
            throws Exception {
        super.afterCompletion(request, response, handler, ex);
    }

}

缺少HTTP Header : WG-Token ,加上就跨域正常了。

PS: 前端報錯說域名不一致,注意域名末尾不需要加斜杠


跨域提示錯誤.png

錯誤提示已描述得很清楚,自己看仔細即可。

Access to XMLHttpRequest at '[http://appservice.wogame-dev.com/h5/uc/getUserDetail](http://appservice.wogame-dev.com/h5/uc/getUserDetail)' from origin '[http://app.wogame-dev.com](http://app.wogame-dev.com)' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value '[http://app.wogame-dev.com/](http://app.wogame-dev.com/)' that is not equal to the supplied origin
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 前言部分 一、跨域是什么? 跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源(廣義的)。 廣義的跨域場景有以...
    爆發吧小宇宙閱讀 3,328評論 0 12
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,973評論 19 139
  • 用兩張圖告訴你,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料? 從這篇文章中你...
    hw1212閱讀 12,960評論 2 59
  • CORS即Cross-Origin Resource Sharing,跨域資源共享 CORS分為兩種 一:簡單的跨...
    _leopold閱讀 19,058評論 0 9
  • $ 什么是CORS ? CORS:Cross-Origin-Resource-Sharing:跨站點資源共享,是一...
    果汁涼茶丶閱讀 4,940評論 2 19