【JavaScript】CORS（跨源资源共享）

在Web开发中，由于同源策略的限制，跨域请求数据一直是一个挑战。CORS（Cross-Origin Resource Sharing）是一种现代的跨域解决方案，它通过服务器设置响应头来允许跨域请求。本篇博客将介绍CORS的原理、配置以及一些常见问题。

1. 同源策略和跨域问题

同源策略是浏览器的一种安全机制，它要求页面上所有的资源请求（如脚本、样式、图片、XHR等）必须同源，即协议、域名、端口号必须相同。这导致了在Web开发中经常遇到的跨域问题。

跨域请求通常会受到浏览器的阻止，但CORS通过在服务器端配置响应头，使得浏览器能够识别并允许跨域请求。

2. CORS的原理

CORS的核心原理是通过在HTTP响应头中添加特定的CORS相关字段，告诉浏览器哪些域名是被允许的，从而解决跨域请求的问题。以下是一些关键的CORS响应头字段：

• Access-Control-Allow-Origin： 指定允许访问的域名。可以是单个域名，也可以是逗号分隔的多个域名，或者使用通配符*表示允许所有域名访问。
• Access-Control-Allow-Methods： 指定允许的HTTP方法。例如，GET、POST等。
• Access-Control-Allow-Headers： 指定允许的HTTP头部。例如，Content-Type等。
• Access-Control-Allow-Credentials： 表示是否允许发送包含凭据的请求，如Cookie。默认情况下，不发送凭据。
• Access-Control-Expose-Headers： 指定哪些HTTP头部可以被浏览器访问。

3. CORS的使用步骤

使用CORS一般需要以下几个步骤：

3.1 服务端设置CORS头

服务端需要在响应中设置CORS头，允许特定的域名访问资源。以下是Node.js Express框架的示例：

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

app.use((req, res, next) => {
  // 允许所有域名访问，可以替换为具体的域名
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Credentials', 'true');

  next();
});

app.get('/data', (req, res) => {
  const data = { message: 'Hello, CORS!' };
  res.json(data);
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

3.2 发起CORS请求

前端页面通过XMLHttpRequest或Fetch API等方式发起CORS请求：

const url = 'http://localhost:3000/data';

// 使用XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.withCredentials = true; // 携带凭据（如Cookie）
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log('Data received:', data);
  }
};
xhr.send();

// 使用Fetch API
fetch(url, {
  method: 'GET',
  credentials: 'include', // 携带凭据（如Cookie）
})
  .then(response => response.json())
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

4. 常见问题及解决方案

4.1 带凭据的CORS请求

如果CORS请求需要携带凭据（如Cookie），需要在客户端和服务端都设置相应的标志。在服务端设置Access-Control-Allow-Credentials: true，在客户端设置XMLHttpRequest的withCredentials为true，或在Fetch API的credentials选项中设置。

4.2 预检请求（Preflight Request）

某些情况下，浏览器会在正式发送CORS请求之前发送一个预检请求（Preflight Request），以确认服务端是否支持实际的CORS请求。预检请求使用HTTP OPTIONS方法，服务端需要正确响应预检请求。

app.options('/data', (req, res) => {
  // 允许预检请求的域名
  res.header('Access-Control-Allow-Origin', 'http://example.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Credentials', 'true');

  res.status(200).end();
});

5. 总结

CORS是现代跨域解决方案的核心，通过在服务端设置响应头，实现了在浏览器中安全、可控地进行跨域请求。了解CORS的原理和使用步骤，对于处理跨域问题至关重要。在使用CORS时，注意设置合适的CORS头，处理带凭据的请求，以及对预检请求的正确响应。希望通过本篇博客，你对CORS有了更深入的了解，并能够在实际项目中应用这一现代跨域解决方案。