🌐 跨域资源共享（CORS）指南

CORS 是浏览器为了防止跨域请求带来的安全风险而实施的机制，但合理配置可解决前后端分离开发中的接口调用问题。以下是关键知识点：

🛠️ 什么是 CORS？

当浏览器发起请求时，若请求源（协议、域名、端口）与响应源不一致，会触发 CORS 预检（Preflight）。
✅ 合法场景：

• 前端调用同域接口
• 后端明确允许跨域（通过响应头 Access-Control-Allow-Origin）
  ❌ 非法场景：
• 未配置 CORS 的接口调用
• 浏览器拦截请求（如出现 No 'Access-Control-Allow-Origin' header 错误）

📋 常见配置方法

1. Express.js

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();
});

2. Spring Boot

@Configuration
@EnableWebMvc
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

3. Nginx

location /api/ {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain; charset=utf-8';
}

⚠️ 常见问题排查

• OPTIONS 预检失败：检查后端是否正确响应 Access-Control-Allow-Origin 和 Access-Control-Allow-Methods
• 证书不匹配：确保 https 请求的域名与 Access-Control-Allow-Origin 一致
• 请求头缺失：前端需携带 Origin 头，后端需响应 Access-Control-Allow-Origin

📘 扩展阅读

如需深入了解 CORS 与 JWT 的结合场景，可参考：
Advanced CORS Configuration
或查看 CORS 安全最佳实践 中的详细说明。