CORS 化解跨域难题

2024-01-02 08:46:38

CORS 的原理

跨域资源共享（CORS）是一种 HTTP 协议，它允许不同源的网页访问受限资源。CORS 引入了两个新的 HTTP 请求头：

Origin：用于指定请求的来源。
Access-Control-Allow-Origin：用于指定哪些源可以访问受限资源。

当浏览器向另一个源发送请求时，它会先发送一个预检请求（preflight request）来检查服务器是否允许跨域请求。预检请求使用 OPTIONS 方法，并带有 Origin 请求头。服务器收到预检请求后，会返回一个 Access-Control-Allow-Origin 响应头，指定哪些源可以访问受限资源。如果浏览器收到允许跨域请求的响应，它就会发送实际的请求。

常见的跨域解决方案

除了 CORS 之外，还有其他几种常见的跨域解决方案：

JSONP（JSON with Padding）：JSONP 是一种非标准的跨域解决方案，它利用<script>标签来加载跨域脚本。JSONP 的主要优点是兼容性好，支持所有浏览器。但是，JSONP 只能用于 GET 请求，并且存在安全漏洞。
代理服务器：代理服务器可以转发请求并修改请求头，从而实现跨域请求。代理服务器的优点是易于使用，可以兼容不同的浏览器。但是，代理服务器的性能可能会比较差，而且需要额外的配置和维护。
WebSocket：WebSocket 是一种全双工通信协议，它允许浏览器与服务器建立持久连接。WebSocket 可以用于跨域通信，但是它需要浏览器和服务器的支持。

CORS 的使用与限制

CORS 的使用非常简单，只需要在服务器端设置 Access-Control-Allow-Origin 响应头即可。例如，在 Node.js 中，可以使用以下代码设置 CORS 响应头：

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

CORS 也有以下几个限制：

必须在服务器端设置 Access-Control-Allow-Origin 响应头。
只能用于简单请求（GET、POST、HEAD）。
不能用于发送 cookie。
不支持文件上传。

结语

CORS 是一种非常有用的跨域解决方案，它可以轻松实现不同源网页之间的资源共享。但是，CORS 也有一些限制，例如必须在服务器端设置 Access-Control-Allow-Origin 响应头，只能用于简单请求，不能用于发送 cookie，不支持文件上传等。在选择跨域解决方案时，需要根据实际情况来选择最合适的方案。