如何CORS和访问控制允许头工作?

阅读时长 5 分钟读完

什么是CORS和访问控制允许头?

CORS (Cross-Origin Resource Sharing) 是一种浏览器机制,用于通过 AJAX 请求跨域共享资源。默认情况下,浏览器禁止从一个源站的 JavaScript 向另一个源站发送 XMLHttpRequest 请求,然而 CORS 允许网站在服务器端进行修改,以使得浏览器能够向不同的来源发送跨域请求。

访问控制允许头则是一组标准化的 HTTP 头部,这些头部可以告诉浏览器哪些跨域请求是被允许的。例如,如果想要允许来自特定源站的跨域请求,则可以使用 Access-Control-Allow-Origin 头部。

如何配置CORS

在服务器端

在服务器端配置CORS时,需要设置以下HTTP头信息:

  • Access-Control-Allow-Origin: 指定允许跨域请求的地址
  • Access-Control-Allow-Methods: 允许跨域请求的HTTP方法
  • Access-Control-Allow-Headers: 允许跨域请求的HTTP头信息

例如,以下 Node.js Express 代码展示了如何启用CORS:

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

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

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

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

上述代码中, res.setHeader() 函数用于设置CORS响应头信息。'*' 表示允许所有来源的跨域请求,也可以指定特定的源站地址。

在客户端

在客户端使用 AJAX 发送跨域请求时,需要设置以下选项:

  • withCredentials: 指定是否需要使用证书
  • headers: 指定附加的请求头信息

例如,以下 jQuery 代码展示了如何发送跨域请求并接收响应:

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

上述代码中, xhrFields 对象用于指定是否需要使用证书,headers 对象用于指定附加的请求头信息。

如何使用访问控制允许头

在服务器端

在服务器端启用访问控制允许头时,需要在CORS响应头信息中添加 Access-Control-Allow-Headers 头部,以指定允许的 HTTP 头信息。

例如,以下 Node.js Express 代码展示了如何启用访问控制允许头:

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

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

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

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

上述代码中,在服务器端启用了 Access-Control-Allow-Headers 头部,以指定允许的 HTTP 头信息。

在客户端

在客户端发送跨域请求时,需要

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

纠错
反馈