什么是 CORS?

CORS(Cross-Origin Resource Sharing)是一种机制,允许浏览器从不同域的服务器请求资源,解决跨域问题。
例如:

  • 前端页面(https://front.com)请求后端API(https://api.example.com
  • 需要后端服务器明确允许跨域访问,否则会触发浏览器的同源策略阻止请求

🛡️ 同源策略与 CORS 的关系

浏览器默认限制跨域请求(同源策略),但 CORS 提供了安全的解决方案:

  1. 简单请求:自动处理,无需额外配置
  2. 非简单请求:需通过 Preflight 请求验证(OPTIONS 方法)

📌 CORS 的核心配置

后端服务器需通过 HTTP 响应头声明允许的域:

Access-Control-Allow-Origin: https://front.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

🧩 常见问题与解决方案

问题 解决方案
请求被拦截 后端添加 Access-Control-Allow-Origin: * 或具体域名
Preflight 失败 确保响应头包含 Access-Control-Allow-MethodsAccess-Control-Allow-Headers
跨域上传文件 配置 Access-Control-Allow-Credentials: true 并设置 withCredentials 属性

📚 扩展阅读

CORS_示意图
*图:CORS 跨域请求流程*