什么是 CORS？为什么它会让前端开发者头疼？
跨域资源共享（Cross-Origin Resource Sharing，简称 CORS）是一种基于 HTTP 头部的机制，它允许服务器标识除了它自己以外的其它域（origin），浏览器应允许这些域访问加载自己的资源。出于安全考虑，浏览器默认会限制从脚本内发起的跨源 HTTP 请求（同源策略）。
常见的 CORS 报错场景
当您在前端通过
fetch()
或
axios
调用不同域名、端口或协议的接口时，如果后端没有正确配置 CORS，浏览器就会抛出著名的
CORS error
。这并不是接口挂了，而是浏览器为了保护用户隐私，拦截了请求的响应内容。
核心指令解析
-
Access-Control-Allow-Origin:
核心指令。指定哪些域名可以跨域访问。使用通配符
*虽然方便，但在涉及凭据（Credentials）时是非法的。 - Access-Control-Allow-Methods: 指定跨域请求允许使用的 HTTP 方法。
-
Access-Control-Allow-Headers:
如果您的请求包含非“简单头部”（如
Authorization或Content-Type: application/json），则必须在此明确列出。 - Access-Control-Max-Age: 告诉浏览器可以将预检请求（OPTIONS）的结果缓存多久，减少重复的预检开销。
解决“OPTIONS 预检请求”带来的性能损耗
对于非简单请求，浏览器会先发送一个
OPTIONS
探测请求。通过设置合理的
Access-Control-Max-Age
，您可以显著提升前后端交互的流畅度，避免每个主请求前都多出一次往返耗时。
为什么不建议在生产环境使用通配符 * ？
使用
Access-Control-Allow-Origin: *
意味着世界上任何网站都可以通过脚本请求您的
API。如果您的接口包含用户敏感数据或需要身份验证，这会带来极大的 CSRF
风险。专业的做法是根据请求头的
Origin
动态判断，或在配置文件中明确列出受信任的域名。
使用我们的生成器，您可以快速获得针对 Nginx、Apache 或 Express 等流行环境的工业级配置模板，彻底告别“跨域 502”或“OPTIONS 405”的烦恼。