Stories

Detail Return Return

記 Accept-Language: "zh-CN" 引起的思考 - Stories Detail

記 Accept-Language: "zh-CN" 引發的思考

先説結論:

"CORS 安全列表請求標頭",不僅僅指 請求頭的 key,也約束了 key 對應的值域

現象

  • 在開發過程中遇到,當 Accept-Language 被錯誤改成 "zh-CN" 時,會導致頁面請求跨域。
    image.png
    image.png
  • 而當設置成 zh-CN(沒有被雙引號包裹)時,請求正常發出,沒有跨域。
    image.png

疑問

  • 為什麼加上雙引號包裹會導致跨域?
  • 為什麼跨域報的錯誤是 "accept-language is not allowed by Access-Control-Allow-Headers"。Accept-Language 不是內置請求頭嗎?非自定義請求頭為什麼還需要額外設置到 Access-Control-Allow-Headers?
  • 當設置成 zh-CN(沒有被雙引號包裹)時,Accept-Language 也不在 Access-Control-Allow-Headers 裏,為什麼可以運行?
    image.png

原因

  • "zh-CN" 不符合「CORS 安全列表請求標頭」中,Accept-Language 的值域要求
  • 所以如果要使得 Accept-Language: "zh-CN" 生效,可通過將 Accept-Language 加入 Access-Control-Allow-Headers。突破「CORS 安全列表請求標頭」的值域要求,直接不校驗了。所以這個報錯提示也正確
    image.png
  • 其實很多文章都有寫,如阮一峯的文章,https://www.ruanyifeng.com/blog/2016/04/cors.html。但要麼漏了細節(值域要求),要麼沒經歷過,引起不了重視,也就不記得。
  • MDN 相關介紹:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Acc...
    image.png

所以

  • Accept-Language 確實非自定義請求頭
  • Access-Control-Allow-Headers 的內容除自定義請求頭外,也可能是「CORS 安全列表請求標頭」中的 key(用於突破值域限制)
    image.png
user avatar qingzhan Avatar longlong688 Avatar huichangkudelingdai Avatar solvep Avatar Z-HarOld Avatar bugDiDiDi Avatar lovecola Avatar geeklab Avatar daishuyunshuzhanqianduan Avatar ailvyoudetiebanshao Avatar baidujiagoushi Avatar coderleo Avatar
Favorites 20 users favorite the story!
Favorites

Add a new Comments

Some HTML is okay.