跨域资源共享（CORS）是浏览器提供的一种安全机制，用于解决跨域请求（Cross-Origin Request）问题。它通过在HTTP响应头中添加特定字段，允许服务器声明哪些来源可以访问其资源。以下是核心原理与实践建议：

1. CORS 工作原理 🔍

  • 同源策略：浏览器默认阻止跨域请求（协议、域名、端口任一不同）。
  • 预检请求（Preflight）：当请求方法为 PUT/DELETE 或包含自定义头部时，会先发送 OPTIONS 请求确认安全性。
  • 响应头控制：
    • Access-Control-Allow-Origin：指定允许访问的域名（如 https://example.com）。
    • Access-Control-Allow-Methods：声明允许的HTTP方法（如 GET, POST）。
    • Access-Control-Allow-Headers：定义允许的请求头（如 Content-Type, Authorization）。
跨域请求_原理

2. 配置 CORS 的常见方式 🛠️

  • 后端设置响应头（推荐）：
    Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
  • 前端使用代理服务器（如 Nginx/Vue CLI/React Create）：
    # 示例：Nginx 配置转发
location /api {
    proxy_pass https://backend-domain.com;
}
  • 开发工具临时解决方案（如 Chrome 插件：Allow CORS: API and Web）：

3. 安全注意事项 ⚠️

  • 避免使用通配符：Access-Control-Allow-Origin: * 会禁用凭证（如 Cookie），若需支持凭证，请明确指定域名。
  • 限制请求方法与头：仅允许必要方法（如 GET）和头字段，避免过度开放。
  • 防范请求头注入：对 Access-Control-Allow-Headers 的值进行严格校验。
  • 防止敏感信息泄露：确保后端接口不暴露不必要的元数据（如 Access-Control-Expose-Headers）。
CORS_配置示例

4. 扩展阅读 📚

📌 提示：CORS 是现代 Web 开发的基础安全实践，合理配置可平衡功能与安全。如需进一步探讨具体场景，可参考 CORS 实战案例库。