9.如何解決出現AXIOS的Request header field Content-Type is not allowed by Access-Control-Allow-Headers in pr

問題描述:vue

因爲restful接口須要在頭部header傳遞兩個字段:json

Content-Type: application/json
Access-Token: 84c6635800b14e0eba4f7ece65e095a1跨域

可是,在vue.js裏面配置:瀏覽器

執行發送的時候出現:restful

意思是預發請求的時候不經過,再也不正式發請求app

通過反覆的測試,發現,header裏面包含自定義字段,瀏覽器是會先發一次options請求,若是請求經過,則繼續發送正式的post請求,而若是不經過則返回以上錯誤post

那這樣就只能在服務端配置options的請求返回,代碼以下:測試

  // TODO 支持跨域訪問
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token");
        response.setHeader("Access-Control-Expose-Headers", "*");

        if (request.getMethod().equals("OPTIONS")) {
            HttpUtil.setResponse(response, HttpStatus.OK.value(), null);
            return;
        }

上面代碼須要加入容許的頭部,content-type和access-token,而且判斷請求的方法是options的時候,返回ok(200)給客戶端,這樣才能繼續發正式的post請求。spa

修改以後成功發了post請求。3d

PS:

看了網上這麼多解釋,基本都用不到,關於AXIOS自定義頭部字段的問題,貌似只有上述方法可以解決

相關文章
相關標籤/搜索