跨域资源共享 (CORS)：简化你的API集成

前端

2023-03-20 10:19:49

跨域请求：让浏览器打破藩篱

跨域请求的痛点

在现代网络世界的广阔海洋中，网站和应用程序往往需要跨越域的界限，访问位于不同服务器上的资源。然而，由于浏览器的安全限制，即同源策略，跨域请求在过去常常被阻止，导致应用程序功能受限。

CORS的诞生：打破隔阂

跨域资源共享 (CORS) 应运而生，打破了同源策略的束缚。CORS 是一种规范，允许浏览器在不同域之间的资源之间进行安全的请求。通过 CORS，一个域的网页可以请求另一个域上的图片、数据或其他资源，即使这些网站位于不同的服务器上。

CORS 的工作原理

CORS 通过一个称为预检 (Preflight) 请求的附加步骤来运作。当浏览器遇到跨域请求时，它会先发送一个预检请求到目标服务器。该请求包含请求类型、要请求的资源以及任何要发送的凭证等信息。

服务器收到预检请求后，将根据其 CORS 配置决定是否允许该请求。如果允许，服务器将返回一个响应，其中包含允许的请求类型、资源和凭证。如果拒绝，服务器将返回一个错误响应，浏览器将阻止该请求。

使用 CORS

要在应用程序中使用 CORS，需要在服务器端和客户端分别进行一些配置。

服务器端配置：

在服务器端，需要配置 CORS 头。这些头指定了哪些域可以请求你的资源，以及允许的请求类型和资源。可以在服务器框架或应用程序代码中配置这些头。

客户端配置：

在客户端，使用 CORS API 发送跨域请求。CORS API 是一组 JavaScript 方法，允许指定请求类型、要请求的资源以及要发送的任何凭证。

常见的 CORS 问题

在使用 CORS 时，可能会遇到以下常见问题：

跨域请求被阻止： 这通常是因为服务器端没有正确配置 CORS 头。确保已经正确配置了 CORS 头，并且允许请求来自你的应用程序的域。
预检请求失败： 这通常是因为服务器端返回的预检响应中包含错误的信息。确保已经正确配置了 CORS 头，并返回了正确的预检响应。
无法发送凭证： 这通常是因为服务器端没有设置允许凭据的 CORS 头。确保已经设置了允许凭据的 CORS 头，并且你的应用程序正确地发送了凭证。

代码示例：

服务器端 CORS 头配置（使用 Node.js）：

app.use(cors({
  origin: 'https://example.com',
  methods: 'GET,POST,PUT,DELETE',
  allowedHeaders: 'Content-Type, Authorization',
  credentials: true
}));

客户端 CORS 请求（使用 JavaScript）：

fetch('https://example.com/api/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  },
  credentials: 'include'
})
.then(response => {
  // Handle response
})
.catch(error => {
  // Handle error
});