Request header field access-token is not allowed by Access-Control-Allow-Headers in preflight res...

google查了一下,這個錯誤的根本原因是因為OPTIONS請求的CORS預(yù)檢不成功導(dǎo)致。

當(dāng)您開始使用自定義請求標(biāo)頭時,您將獲得CORS預(yù)檢。這是一個使用·HTTP OPTIONS·方式并包含多個屬性的請求,其中一個標(biāo)題是列出客戶端要包含在請求中的CORS頭的Access-Control-Request-Headers。

您需要使用適當(dāng)?shù)?code>CORS頭回復(fù)該CORS預(yù)檢,才能使其正常工作。其中一個是Access-Control-Allow-Headers。該屬性需要包含Access-Control-Request-Headers屬性包含的相同值(或更多)。

請求1.png
請求2.png

解決方法:在express的攔截器添加

      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS");
      res.header("Access-Control-Allow-Headers", "Content-Type,access-token");  // 修改了這段
      res.header("Access-Control-Allow-Credentials", "true");
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.瀏覽器的同源安全策略 瀏覽器只允許請求當(dāng)前域的資源,而對其他域的資源表示不信任。 那怎么才算跨域呢? 請求協(xié)議...
    趙客縵胡纓v吳鉤霜雪明閱讀 2,087評論 1 10
  • CORS是一個W3C標(biāo)準(zhǔn),全稱是"跨域資源共享"(Cross-origin resource sharing)。 ...
    myccy8閱讀 465評論 0 2
  • 什么是跨域HTTP請求 現(xiàn)代瀏覽器出于安全的考慮,使用 XMLHttpRequest對象發(fā)起 HTTP請求時必須遵...
    孤獨的人最善良閱讀 1,245評論 0 0
  • 一、簡介 CORS需要瀏覽器和服務(wù)器同時支持。目前,所有瀏覽器都支持該功能,IE瀏覽器不能低于IE10。 整個CO...
    mongofeng閱讀 329評論 0 0
  • 前沿: 最近總聽到同事聊跨域得問題,于是自己抽空仔細(xì)的查閱了一下關(guān)于跨域的知識。說到跨域,就得提到同源,跨域是指一...
    戈弋圖閱讀 1,930評論 0 4

友情鏈接更多精彩內(nèi)容