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：
易通企业网站系统 别名CmsEasy 是国内唯一免费微信+手机端+微网站+手机短信+在线销售+多语言网站组合的企业营销管理平台，易通企业网站系统也称易通企业网站程序，是易通公司开发中国首套免费提供企业网站模板的营销型企业网站管理系统，系统前台生成html、完全符合SEO、同时有在线客服、潜在客户跟踪、便捷企业网站模板制作、搜索引擎推广等功能的企业网站系统。
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。
