CORS配置指南 🌐

CORS（跨源资源共享）是解决浏览器跨域请求限制的关键技术。以下是常见配置方法与注意事项：

1. 服务器端配置 ✅

• 设置响应头
  添加以下头信息到HTTP响应中：

  Access-Control-Allow-Origin: *
  Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
  Access-Control-Allow-Headers: Content-Type, Authorization
  

  👉 通过 HTTP头配置工具 可可视化调试头信息

• 处理预检请求 (Preflight)
  对 OPTIONS 请求需返回完整CORS头，确保与客户端请求方法/头匹配
  📌 关键点：Access-Control-Max-Age 控制预检缓存时间

2. 客户端配置 ⚙️

• 浏览器自动处理简单请求（GET/POST），但复杂请求需显式设置：

  fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer token'
    }
  })
  

3. 常见问题 ❓

• 错误：No 'Access-Control-Allow-Origin' header
  检查服务器是否遗漏了该头字段
• 调试建议
  使用浏览器开发者工具的Network面板查看实际请求头
  📸 插入图片：CORS_Request_Flow

4. 扩展阅读 📚

• 深入理解CORS机制
• Nginx CORS配置示例
• 📸 插入图片：CORS_Configuration_Example