什么是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