RESTful API 的 CORS 原理与实现

阅读时长 3 分钟读完

什么是 CORS?

CORS(跨域资源共享,Cross-Origin Resource Sharing)在网络开发中,经常遇到浏览器同源策略限制问题,这就需要跨域进行相应资源的访问处理。CORS 用于在服务端扩展一个与浏览器沟通的 HTTP 头,使得运行在一个 origin 的 Web 应用可以访问来自不同源的服务。

CORS 的原理

CORS 需要浏览器的支持,其具体工作原理如下:

  1. 浏览器在发送数据请求时,会携带 Origin 头,表示请求来自哪个源,比如说 http://www.example.com。

  2. 服务器接收到请求后,会在响应头中添加 Access-Control-Allow-Origin 字段,如果需要指定允许的源,就需要在该字段中说明,比如说 Access-Control-Allow-Origin: http://www.example.com,表示只允许来自该源的请求。

  3. 如果请求需要携带 cookie、自定义头等数据,则需要设置 Access-Control-Allow-Credentials: true 字段。

  4. 如果请求需要发送的 HTTP 方法不止 GET / POST,则需要设置 Access-Control-Allow-Methods 字段。

  5. 如果请求需要发送的 HTTP 头字段不止 Content-Type、Authorization 等,则需要在头信息中加入 Access-Control-Allow-Headers 字段。

如何实现 CORS

下面的 Node.js 代码演示了如何实现 CORS 操作:

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

在应用中:

  1. 设置 Access-Control-Allow-Origin 为 * 表示允许所有来源的请求,但这样不安全,因为服务器可以处理私有数据。在生产环境下,应该只允许受信任的源(域名)访问。

  2. 设置 Access-Control-Allow-Headers 字段可以允许浏览器发送特定的头信息。

总结

CORS 是浏览器的一个安全功能,由于浏览器的同源策略会限制跨域操作,因此必须在服务端设置跨域响应头,才能使浏览器愉快地完成请求操作。CORS 的实现不难,但是安全性需要重视,开发人员需要严格掌控允许操作的源(域名)。

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

纠错
反馈