踩坑記錄-前端請求若是攜帶Cookie信息，那麼後端Access-Control-Allow-Origin不能爲 *

踩坑記錄-前端請求若是攜帶Cookie信息，那麼後端Access-Control-Allow-Origin不能爲*

知識點

前端發出的請求若是是附帶身份驗證（withCredentials：true）

然後端的Access-Control-Allow-Origin若是設置的是*

那麼這個請求會失敗，在Options預請求時會被攔截下來。

來源 MDN文檔 ：
https://developer.mozilla.org...

踩坑記錄

在一個文件上傳的接口出現問題。

• 1.查看Network發現只有預請求Option
• 2.查看console控制檯，報錯

大概意思是說，在預請求時，請求就失敗了。
Access-Control-Allow-Origin不能爲 * ,當請求的證書模式爲「include」時
這是你的請求沒有經過的緣由
這個證書模式初始化是經過Ajax的withCredentials屬性控制的

• 3.查看文件上傳的vue代碼

<el-upload 
          :action=path 
          :on-success="import_upload_ok" 
          :on-error="import_error" 
          :with-credentials="true" 
          :show-file-list=false 
          :headers=token 
          ref=dom>
        <el-button class="first-btn  upload-btn" type="primary">
          <span class="el-icon-plus"></span>
          同步快遞信息
        </el-button>
      </el-upload>

能夠看到我設置了:with-credentials="true"

• 4.查看:with-credentials=「true」是什麼意思，根據element文檔

得知with-credentials是用來設置是否支持發送cookie憑證信息的字段

總結

能夠理解爲這是一條http協議或者CORS的規則。

就是當request中設置了withCredentials : true,也就是請求攜帶了驗證身份信息時，

response的Access-Control-Allow-Origin : *,（而是應該有請求身份過濾）

不然的話，請求會失敗。

這裏的解決辦法有2個，

• 一個後端設置Access-Control-Allow-Origin作一個身份過濾
• 一個是前端設置withCredentials：false。也就是前端放棄傳遞Cookie信息

由於我這裏還真不必傳遞Cookie身份信息，因此我就選擇設置withCredentials：false