返回

一眼就懂的CORS详解，告诉你什么是真正的拒绝跨域！

前端

跨域问题详解：CORS的救赎之旅

跨域的困扰

在现代Web开发中，跨域是一个挥之不去的梦魇。当一个Web应用程序试图从另一个域获取资源时，跨域问题就会浮出水面。这种域与域之间的对抗会导致浏览器抛出恼人的错误，或直接将请求拒之门外。

CORS的曙光

为了打破跨域僵局，W3C推出了CORS（跨域资源共享）规范，犹如黑暗中的一道曙光。CORS为浏览器提供了发送额外的HTTP头信息的机会，向服务器表明自己是否欢迎跨域请求。

CORS的运作机制

CORS的运作机制妙趣横生。当浏览器发出跨域请求时，它会首先派出一个预检请求（preflight request）前往服务器。预检请求中包含了浏览器希望在实际请求中携带的HTTP头信息。服务器收到预检请求后，便会依据自身的安全策略，决定是否批准跨域请求。

若获准，服务器会返还一个HTTP 200响应码，同时附上已批准的HTTP头信息。浏览器在收到预检请求的答复后，若跨域请求获得批准，就会发起实际请求。实际请求中包含了预检请求中获准的HTTP头信息。服务器收到实际请求后，会再次按照安全策略进行处理，最终返回响应。

CORS的配置艺术

要配置CORS，需要在服务器端操刀Access-Control-Allow-Origin、Access-Control-Allow-Headers和Access-Control-Allow-Methods等HTTP头信息。

Access-Control-Allow-Origin

Access-Control-Allow-Origin指定了有资格发出跨域请求的域。

Access-Control-Allow-Headers

Access-Control-Allow-Headers指定了跨域请求中可以包含的HTTP头信息。

Access-Control-Allow-Methods

Access-Control-Allow-Methods指定了跨域请求中可使用的HTTP方法。

CORS的常见疑问解答

预检请求失败怎么办？

预检请求的失败可能源于服务器的安全策略不允许跨域请求。

实际请求失败又该如何？

实际请求的失败可能源于服务器的安全策略不允许实际请求。

CORS预检请求头

CORS预检请求头是浏览器在发出实际请求前发送的HTTP头信息，包括：

Origin

Origin指定了请求的来源域。

Access-Control-Request-Method

Access-Control-Request-Method指定了实际请求所使用的方法。

Access-Control-Request-Headers

Access-Control-Request-Headers指定了实际请求中所包含的HTTP头信息。

结语

CORS是一把跨域利器，它能轻而易举地解决跨域难题。通过正确配置CORS，跨域请求将不再是梦。

示例代码

服务器端配置（Node.js）：

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");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  next();
});

客户端请求（JavaScript）：

fetch('https://example.com/api/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  // 处理响应
})
.catch(error => {
  // 处理错误
});

请记住，跨域请求可能会受到同源策略的限制，特别是对于需要访问敏感信息的请求。因此，在使用CORS时，安全至上。