cors是跨源资源共享机制，允许服务器放宽同源策略限制，实现跨域请求。1)预检请求：浏览器发送options请求询问服务器是否允许跨域。2)服务器响应：若允许，返回cors头信息。3)实际请求：通过预检后，浏览器发送请求并包含origin头。4)服务器处理：检查origin头，决定是否允许请求并返回cors头。
引言
你问我 CORS 是什么？在 H5 前端开发中，CORS（Cross-Origin Resource Sharing，跨源资源共享）是一个关键的安全机制，用来解决跨域资源请求的问题。今天我们就来深挖一下这个话题。我会从基础概念讲起，然后详细分析 CORS 的工作原理，再通过实际的代码示例来展示如何在项目中应用 CORS。读完这篇文章，你将对 CORS 有更深入的理解，并且能够在开发中灵活运用。
基础知识回顾
在讲 CORS 之前，我们得先明白什么是“同源策略”。同源策略是浏览器的一个安全功能，它限制了一个源（域、协议、端口）的文档或脚本如何能与另一个源进行交互。简单来说，如果你的网页和要请求的资源不在同一个源下，浏览器就会阻止这个请求。
CORS 就是为了解决这个限制而生的。它允许服务器表明哪些源有权限访问哪些资源。通过在 http 头中添加特定的字段，服务器可以放宽同源策略的限制，允许跨域请求。
立即学习“前端免费学习笔记（深入）”；
核心概念或功能解析
CORS 的定义与作用
CORS 是一种机制，允许服务器放宽同源策略的限制，允许跨域请求。它的主要作用是让服务器能够明确地告诉浏览器，哪些源可以访问它的资源。这对于现代 Web 应用来说至关重要，因为很多应用都需要从不同的源获取数据。
举个简单的例子，假设你有一个前端应用运行在 http://example.com，而你的 API 服务器运行在 http://api.example.com。没有 CORS，你的浏览器会阻止前端应用请求 API 服务器的数据。通过 CORS，API 服务器可以告诉浏览器，http://example.com 是有权限访问它的资源的。
CORS 的工作原理
CORS 的工作原理主要通过 HTTP 头来实现。当浏览器发起一个跨域请求时，它会先发送一个预检请求（OPTIONS 请求），来询问服务器是否允许这个跨域请求。如果服务器允许，它会返回一些特定的 HTTP 头来表明它的意愿。
以下是 CORS 工作的几个关键步骤：
- 预检请求：浏览器发送一个 OPTIONS 请求到服务器，询问是否允许跨域请求。这个请求会包含一些头信息，如 Origin、Access-Control-Request-Method 和 Access-Control-Request-Headers。
- 服务器响应：如果服务器允许这个请求，它会返回一些 CORS 相关的头信息，如 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers。
- 实际请求：如果预检请求通过，浏览器会发送实际的请求，并在请求中包含 Origin 头。
- 服务器处理：服务器会检查 Origin 头，并根据 CORS 策略决定是否允许这个请求。如果允许，它会返回相应的 CORS 头。
这里有一个简单的 Node.JS 服务器示例，展示如何设置 CORS：
const express = require('express'); const app = express(); app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); }); app.get('/api/data', (req, res) => { res.json({ message: 'Hello from the API!' }); }); app.listen(3000, () => { console.log('Server running on port 3000'); });
这个例子中，我们使用 Express 中间件来设置 CORS 头，允许所有源访问我们的 API。
使用示例
基本用法
在前端应用中，使用 CORS 非常简单。你只需要像平常一样发起请求，浏览器会自动处理 CORS 相关的逻辑。例如，使用 Fetch API：
fetch('http://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
这个请求会自动触发 CORS 机制，如果服务器设置了正确的 CORS 头，请求就会成功。
高级用法
在一些复杂的场景下，你可能需要处理预检请求，或者设置更细粒度的 CORS 策略。例如，你可能只想允许特定的源访问你的 API：
app.use((req, res, next) => { const allowedOrigins = ['http://example.com', 'http://subdomain.example.com']; const origin = req.headers.origin; if (allowedOrigins.includes(origin)) { res.setHeader('Access-Control-Allow-Origin', origin); } res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); next(); });
这个例子中，我们只允许特定的源访问我们的 API，并且设置了更多的 HTTP 方法。
常见错误与调试技巧
在使用 CORS 时，常见的错误包括：
- CORS 头未设置：如果服务器没有设置正确的 CORS 头，浏览器会阻止请求。你可以通过检查网络请求的响应头来确认是否设置了正确的 CORS 头。
- 预检请求失败：如果预检请求失败，浏览器会阻止实际请求。你可以通过检查 OPTIONS 请求的响应头来确认是否设置了正确的 CORS 头。
调试 CORS 问题时，可以使用浏览器的开发者工具来查看网络请求和响应头。特别是查看 OPTIONS 请求的响应头，可以帮助你快速定位问题。
性能优化与最佳实践
在实际应用中，优化 CORS 的性能主要集中在减少预检请求的次数和优化服务器响应。以下是一些建议：
- 减少预检请求：预检请求会增加网络开销，尽量减少它们的次数。例如，可以通过设置 Access-Control-Max-Age 头来缓存预检请求的结果。
- 优化服务器响应：确保服务器能够快速响应预检请求，减少等待时间。
在编程习惯和最佳实践方面，建议：
- 代码可读性：在设置 CORS 头时，确保代码的可读性和可维护性。使用中间件或库来简化 CORS 的设置。
- 安全性：只允许必要的源访问你的 API，避免设置过于宽松的 CORS 策略。
总的来说，CORS 是一个强大的工具，可以帮助你构建更灵活和安全的 Web 应用。希望这篇文章能帮助你更好地理解和应用 CORS。
