CORS 错误:Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response

阅读时长 3 分钟读完

什么是CORS?

CORS(Cross-Origin Resource Sharing)是一种安全机制,用于限制浏览器从一个源发起的跨域HTTP请求。在同源策略下,浏览器只允许发送同源的请求,即协议、主机名和端口号都相同的两个 URL。而跨域请求则需要经过服务器端的支持才能实现。

什么是预检请求?

当跨域请求中包含了非简单请求时(比如带有自定义头部字段或使用PUT/DELETE等非GET/POST方法),浏览器会先发起一次 OPTIONS 请求,称为预检请求(preflight request)。目的是向服务器确认这些非简单请求是否被允许、并获取服务器允许的请求头字段、请求方法、请求体等信息。

什么是Access-Control-Allow-Headers?

在预检请求中,服务器会返回一个响应头Access-Control-Allow-Headers来指定允许的请求头字段。如果请求头中有未被允许的字段,则浏览器会报错。

如何解决 "Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response" 错误?

该错误表明服务器没有允许Authorization字段作为请求头。要解决这个问题,需要在服务器端的CORS配置中加入 'Authorization' 字段,示例如下:

Express

-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
------------- ---- ----- -- -
  -- --------
  ----------------------------------------- -----
  -- --------
  ------------------------------------------ ------------------------------
  -- -------
  ------------------------------------------ ----- ----- ---- ------- --------
  -- ----------- --- ---------- -
    -- ------------
    --------------------
  - ---- -
    -------
  -
---

Koa

-- -------------------- ---- -------
----- --- - ---------------
----- --- - --- ------
------------- ----- ----- -- -
  -- --------
  -------------------------------------- -----
  -- --------
  --------------------------------------- ------------------------------
  -- -------
  --------------------------------------- ----- ----- ---- ------- --------
  -- ----------- --- ---------- -
    -- ------------
    ---------- - ----
  - ---- -
    ----- -------
  -
---

总结

CORS 是一种跨域请求的安全机制,预检请求是其中的一环。要解决 "Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response" 错误,需要在服务器端配置中加入对应的请求头字段。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/606f0b6d2d2a29a3c1202c66

纠错
反馈