Skip to content

CORS 跨域错误

快速摘要

你的前端在 `a.com`，去请求 `b.com` 的接口，但 `b.com` 没有在响应头里允许 `a.com` 跨域访问，浏览器就拦截了。

为什么发生

  • 后端接口没有设置正确的 Access-Control-Allow-Origin 响应头

  • 请求带了 Cookie 或自定义头，触发预检（OPTIONS）请求，但后端没处理

  • 开发时用 localhost 调用线上接口，被 CORS 策略阻止

最小示例

✗ 错误代码
fetch("https://api.example.com/data")
  .then(r => r.json());
✓ 修复代码
// 后端需返回：Access-Control-Allow-Origin: https://your-site.com
fetch("https://api.example.com/data")
  .then(r => r.json());

前端代码本身没错，问题在后端。后端必须在响应头里加上 Access-Control-Allow-Origin 允许你的源访问。

如何诊断

  • 在浏览器控制台查看完整的 CORS 错误信息，确认是哪个源、哪个目标

  • 在 Network 面板查看 OPTIONS 预检请求的响应头

  • 确认后端是否返回了 Access-Control-Allow-Origin 等头

如何修复

  • 在后端响应里加上 Access-Control-Allow-Origin: <你的源> 或 *

  • 正确处理 OPTIONS 预检请求，返回所需的 CORS 头

  • 开发环境用代理（如 Vite 的 server.proxy）绕过浏览器同源限制

如何预防

  • 前后端统一在一个域下，或后端从一开始就配置好 CORS

  • 开发环境统一走代理，避免直连跨域接口

相关资源

相关术语

相关课程

相关练习

相关工具

← 返回语言