跨域资源共享（CORS）

什么是跨域资源共享？

跨域资源共享（Cross-Origin Resource Sharing，简称CORS）是一种机制，用于在浏览器和服务器之间进行安全的跨域数据传输。当网页的源（域、协议或端口）与请求的资源的源不一致时，就会发生跨域问题。CORS定义了一组规则，允许服务器指定哪些源可以访问其资源，以解决跨域访问的限制问题。

为什么需要跨域资源共享？

跨域资源共享是出于安全考虑而产生的。同源策略是浏览器的一种安全策略，限制了不同源之间的数据访问。但有时候，我们需要从其他域名下的服务器获取数据或调用接口，这就需要跨域资源共享来允许跨域访问。

如何使用跨域资源共享？

使用CORS进行跨域资源共享，需要在服务器端进行配置。当浏览器发送跨域请求时，服务器会返回一组HTTP响应头，来指示浏览器是否允许该请求。以下是常用的CORS响应头：

Access-Control-Allow-Origin: <origin>
Access-Control-Allow-Methods: <methods>
Access-Control-Allow-Headers: <headers>
Access-Control-Allow-Credentials: true | false
Access-Control-Max-Age: <seconds>

• Access-Control-Allow-Origin: 允许访问资源的源，可以是具体的源或通配符 *。
• Access-Control-Allow-Methods: 允许的请求方法，例如 GET、POST等。
• Access-Control-Allow-Headers: 允许的请求头字段，可以是自定义的头字段。
• Access-Control-Allow-Credentials: 是否允许发送 Cookie。如果设为 true，表示允许发送 Cookie。
• Access-Control-Max-Age: 预检请求的缓存时间（秒）。对于相同的请求，预检请求会在此时间内缓存结果。

简单请求与非简单请求

根据CORS的规范，浏览器将请求分为简单请求（simple request）和非简单请求（not-so-simple request）。

简单请求满足以下所有条件：

• 请求方法为：GET、POST、HEAD。
• 请求头仅包含：Accept、Accept-Language、Content-Language、Content-Type（仅限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain）。
• 不使用自定义的请求头（例如：X-Custom-Header）。

对于简单请求，浏览器会自动在请求中添加一个 Origin 头字段，并且不会在正式发起请求前发送 OPTIONS 预检请求。

对于非简单请求，浏览器会在正式发起请求前先发送一个 OPTIONS 预检请求，该预检请求包含一些额外的头字段，例如 Access-Control-Request-Method 和 Access-Control-Request-Headers。

前端配置 CORS

在前端，可以通过以下方式配置CORS：

1. 使用XMLHttpRequest进行跨域请求，浏览器自动添加适当的请求头。
2. 使用 Fetch API 进行跨域请求，Fetch API 提供了许多参数来自定义请求，例如 mode 和 credentials。

后端配置 CORS

在后端，可以通过服务器设置响应头来进行CORS配置。

在常见的服务器框架中，如Node.js的Express或Java的Spring Boot，可以通过中间件或拦截器来配置CORS响应头。

以下是Node.js Express框架中配置CORS的示例：

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, Content-Type');
  next();
});

// 其他路由和业务逻辑代码...

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

总结

CORS是解决跨域访问问题的一种机制，允许服务器指定允许访问的源、方法和头字段。通过在服务器配置CORS响应头，可以实现安全的跨域数据传输。前端可以使用XMLHttpRequest或Fetch API发起跨域请求，后端可以通过服务器设置响应头来配置CORS规则。