走进CORS预请求的世界，揭秘跨域请求的奥秘

CORS 预请求：跨域请求的领航员

跨域请求是 Web 开发中不可或缺的一部分，但如果没有适当的措施，它们可能会因浏览器的安全限制而受阻。CORS 预请求就是这样的措施，它充当跨域请求的引航员，帮助它们穿越浏览器的藩篱。

理解跨域请求

跨域请求是指从一个源站（即域或端口）向另一个不同的源站发送的 HTTP 请求。出于安全考虑，浏览器默认会阻止这些请求，以防止恶意网站获取敏感信息。

CORS 的引入

CORS（跨域资源共享）是一种机制，允许跨域请求在满足特定条件的情况下进行。它通过预检请求向服务器询问是否允许该请求，然后再发送实际请求。

预检请求

预检请求是一个 OPTIONS 请求，用于询问服务器是否允许跨域请求。它包含请求方法、请求头和请求正文等信息。

服务器响应

服务器在收到预检请求后，会根据请求信息决定是否允许跨域请求。如果允许，服务器将在响应中设置 Access-Control-Allow-Origin 标头，指定哪些源站可以访问该资源。

正式请求

如果预检请求获得批准，浏览器将发送正式的跨域请求。此请求与预检请求包含相同的信息，并附带上 Origin 标头，指示请求的源站。

简单请求与复杂请求

• 简单请求： 使用 GET、POST、HEAD 或 PUT 方法，不包含自定义标头，请求正文为空。对于简单请求，浏览器会自动发送预检请求，无需用户干预。
• 复杂请求： 使用其他请求方法（例如 DELETE）、包含自定义标头或请求正文不为空。对于复杂请求，浏览器必须先发送预检请求，服务器必须批准后才能发送正式请求。

安全凭据

当跨域请求包含安全凭据（例如 Cookie 或 HTTP 认证信息）时，浏览器会更加谨慎。它会在预检请求中包含这些凭据，服务器必须在响应中设置 Access-Control-Allow-Credentials 标头为 true，才能允许跨域请求携带凭据。

CORS 应用

CORS 在 Web 开发中有着广泛的应用，例如：

• JSONP：一种跨域请求的简单实现，使用 <script> 标签发送请求。
• WebSocket：一种跨域通信协议，允许客户端和服务器建立双向通信通道。
• XMLHttpRequests：一种通过 JavaScript 发起跨域请求的 API。

结论

CORS 预请求是跨域请求的基石，它通过向服务器询问是否允许该请求来安全地进行跨域请求。了解 CORS 预请求的工作原理对于 Web 开发人员非常重要，它使他们能够创建跨越源站边界并扩展 Web 应用程序功能的应用程序。

常见问题解答

1. 为什么要使用 CORS？
   CORS 用于允许跨源站的 HTTP 请求，从而突破浏览器的安全限制，在不同域之间共享资源。

2. 什么时候需要预检请求？
   对于复杂请求（非 GET、POST、HEAD 或 PUT，或包含自定义标头或非空请求正文），需要预检请求。

3. 服务器如何回应预检请求？
   服务器通过在响应中设置 Access-Control-Allow-Origin 标头来回应预检请求，指示哪些源站可以访问该资源。

4. 安全凭据在 CORS 中是如何处理的？
   安全凭据在预检请求中包含，服务器必须通过设置 Access-Control-Allow-Credentials 标头为 true 来允许跨域请求携带这些凭据。

5. CORS 有哪些替代方案？
   CORS 的替代方案包括 JSONP、WebSocket 和服务器端代理。

代码示例

// 预检请求
fetch('https://example.com/api/v1/users', {
  method: 'OPTIONS',
  headers: {
    'Origin': 'https://mywebsite.com'
  }
})
.then(res => res.json())
.then(data => {
  // 处理预检请求的响应
})
.catch(err => {
  // 处理错误
});

// 正式请求
fetch('https://example.com/api/v1/users', {
  method: 'GET',
  headers: {
    'Origin': 'https://mywebsite.com'
  }
})
.then(res => res.json())
.then(data => {
  // 处理正式请求的响应
})
.catch(err => {
  // 处理错误
});