CORS 协议完全解析Fetch Standard 中的跨域请求机制【免费下载链接】fetchFetch Standard项目地址: https://gitcode.com/gh_mirrors/fetc/fetch在现代 Web 开发中跨域资源共享CORS是保障浏览器安全与灵活性的核心机制。作为 Fetch Standard 的重要组成部分CORS 协议解决了不同域名间数据请求的安全限制问题。本文将深入解析 CORS 的工作原理、核心概念及实际应用场景帮助开发者快速掌握这一必备技能。什么是 CORS 协议CORSCross-Origin Resource Sharing是一种基于 HTTP 头的安全机制它允许浏览器向跨域服务器发出请求同时通过特定规则保护用户数据安全。Fetch Standard 明确规定了 CORS 协议的实现细节确保不同来源的资源能够安全交互。当网页通过fetch()或XMLHttpRequest发起跨域请求时浏览器会自动应用 CORS 规则。如果请求不符合安全要求或服务器未正确配置 CORS 头浏览器将阻止响应内容的访问从而防止恶意网站获取敏感数据。CORS 请求的类型与触发条件根据 Fetch Standard 规范CORS 请求分为两种基本类型简单请求和预检请求Preflight Request。理解这两种类型的区别是正确实现 CORS 的关键。简单请求Simple Request简单请求是指满足以下条件的跨域请求方法限制只能使用 GET、HEAD 或 POST 这三种 CORS 安全方法CORS-safelisted method头部限制只能包含以下 CORS 安全请求头CORS-safelisted request-headerAcceptAccept-LanguageContent-LanguageContent-Type仅限 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 三种 MIME 类型简单请求不会触发预检流程直接向服务器发送实际请求并在响应中验证 CORS 头信息。预检请求Preflight Request当请求不满足简单请求条件时浏览器会先发送一个 OPTIONS 方法的预检请求以确认服务器是否允许实际请求。以下情况会触发预检使用 PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH 等非安全方法包含非安全请求头如 Authorization、Content-Type: application/json 等请求中包含自定义头信息XMLHttpRequestUpload 对象注册了事件监听器请求中使用了 ReadableStream 对象预检请求会携带以下关键头信息Access-Control-Request-Method实际请求使用的方法Access-Control-Request-Headers实际请求包含的非安全头服务器通过预检响应告知浏览器是否允许该跨域请求。CORS 核心响应头详解服务器通过返回特定的 CORS 响应头来控制跨域访问权限。以下是最常用的几个核心头Access-Control-Allow-Origin该头指定允许访问资源的源域。它的值可以是具体域名如 https://example.com通配符 *允许所有域访问但不允许携带凭据null通常用于 file:// 协议的本地资源当请求包含凭据如 cookies时服务器必须返回具体的源域不能使用通配符。Access-Control-Allow-Methods该头指定服务器允许的 HTTP 方法用于预检请求的响应。例如Access-Control-Allow-Methods: GET, POST, PUT, DELETEAccess-Control-Allow-Headers指定服务器允许的请求头用于预检请求的响应。例如Access-Control-Allow-Headers: Content-Type, AuthorizationAccess-Control-Expose-Headers默认情况下浏览器只能访问响应中的 Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma 等简单头。通过该头可以暴露更多自定义头供客户端访问。Access-Control-Allow-Credentials布尔值指示是否允许请求携带凭据cookies、HTTP 认证信息等。当设置为 true 时Access-Control-Allow-Origin 不能使用通配符。Access-Control-Max-Age指定预检请求的结果可以缓存的时间秒。在此时间内相同的请求不需要再次发送预检请求。CORS 协议的工作流程CORS 协议的工作流程根据请求类型有所不同下面分别介绍简单请求和预检请求的完整流程。简单请求流程客户端发送跨域请求自动添加 Origin 头服务器处理请求返回响应并包含 Access-Control-Allow-Origin 等 CORS 头浏览器检查响应头如果 Origin 在允许列表中允许访问响应内容如果不允许浏览器阻止 JavaScript 访问响应预检请求流程浏览器检测到请求需要预检发送 OPTIONS 方法的预检请求包含 Origin、Access-Control-Request-Method 和 Access-Control-Request-Headers 头服务器处理预检请求返回包含 CORS 许可信息的响应浏览器检查预检响应如果允许跨域请求发送实际请求如果不允许阻止实际请求并抛出错误服务器处理实际请求并返回响应浏览器再次检查响应的 CORS 头决定是否允许访问响应内容常见 CORS 问题及解决方案即使理解了 CORS 原理开发者仍可能遇到各种跨域问题。以下是一些常见场景及解决方法问题No Access-Control-Allow-Origin header is present原因服务器未配置 Access-Control-Allow-Origin 头或其值与请求的 Origin 不匹配。解决方案在服务器端添加 Access-Control-Allow-Origin 头指定允许的源域开发环境可临时使用通配符 *生产环境应指定具体域名问题Request header field X is not allowed by Access-Control-Allow-Headers原因请求中包含的某些头信息未被服务器的 Access-Control-Allow-Headers 许可。解决方案在服务器响应中添加 Access-Control-Allow-Headers 头包含请求中使用的所有非安全头尽量使用 CORS 安全头以避免预检请求问题Credentials flag is true, but the Access-Control-Allow-Origin is *.原因当请求携带凭据时Access-Control-Allow-Origin 不能使用通配符。解决方案将 Access-Control-Allow-Origin 设置为请求的具体 Origin 值同时设置 Access-Control-Allow-Credentials: true问题Preflight request doesnt pass access control check原因预检请求被服务器拒绝可能是不支持的方法或头信息。解决方案确保服务器正确处理 OPTIONS 方法的预检请求在预检响应中正确设置 Access-Control-Allow-Methods 和 Access-Control-Allow-HeadersCORS 在 Fetch API 中的应用Fetch API 是现代浏览器提供的用于网络请求的接口它原生支持 CORS。以下是使用 fetch() 处理跨域请求的示例基本跨域请求fetch(https://api.example.com/data, { method: GET, headers: { Accept: application/json } }) .then(response response.json()) .then(data console.log(data)) .catch(error console.error(Error:, error));携带凭据的跨域请求fetch(https://api.example.com/data, { method: GET, credentials: include, // 携带 cookies headers: { Accept: application/json } }) .then(response response.json()) .then(data console.log(data));处理预检请求fetch(https://api.example.com/data, { method: PUT, headers: { Content-Type: application/json, X-Custom-Header: value }, body: JSON.stringify({ key: value }) }) .then(response response.json()) .then(data console.log(data));注意此请求会触发预检因为使用了 PUT 方法和自定义头 X-Custom-HeaderCORS 安全最佳实践正确实现 CORS 不仅能解决跨域问题还能确保应用的安全性。以下是一些最佳实践限制允许的源域避免使用通配符 *明确指定允许的域名最小权限原则只允许必要的 HTTP 方法和请求头谨慎处理凭据仅在必要时允许凭据访问并严格验证 Origin缓存预检结果合理设置 Access-Control-Max-Age 减少预检请求使用 HTTPS在生产环境中始终使用 HTTPS避免中间人攻击验证所有 CORS 请求不要假设 CORS 请求都是安全的服务器端仍需验证请求内容总结CORS 协议是现代 Web 开发中不可或缺的安全机制它通过一套明确的规则实现了跨域资源的安全共享。理解 CORS 的工作原理、请求类型和响应头含义能够帮助开发者快速解决跨域问题构建安全可靠的 Web 应用。Fetch Standard 对 CORS 的详细规范为浏览器和服务器实现提供了明确指导。通过遵循本文介绍的最佳实践开发者可以在保障安全性的同时充分利用 CORS 带来的灵活性实现不同域之间的无缝数据交互。无论是处理简单的跨域请求还是实现复杂的预检流程掌握 CORS 都是前端开发者的必备技能。希望本文能帮助你更深入地理解 CORS 协议并在实际项目中正确应用这一重要机制。【免费下载链接】fetchFetch Standard项目地址: https://gitcode.com/gh_mirrors/fetc/fetch创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考