术语图鉴/后端基础/跨域
←→切换Esc返回

跨域 CORS

你可能会说

帮我处理一下跨域,我不太确定最佳实践是什么。

浏览器的安全规则:A 网站的 JavaScript 默认不能直接请求 B 网站的 API。

浏览器的安全规则:A 网站的 JavaScript 默认不能直接请求 B 网站的 API。需要 B 明确「允许」才行。

也常被叫作CORS

生活类比

像小区门禁——外人(别的网站)默认进不来,需要业主(服务器)授权放行。

🎮 动手试试

🌐 a.com
→OPTIONS preflight ✓→
🖥️ api.b.com
选择题选择一个你认为最合适的答案

关于「跨域」,以下哪个描述最准确?

你可以这样告诉 AI

帮我配置后端 CORS,允许前端 localhost:3000 发来的请求,支持携带 cookie,只开放 GET 和 POST。

容易混淆?这样区分

跨域 CORS≠
API API

CORS 是浏览器的安全机制——限制跨域请求;API 是接口本身。CORS 管「谁能调」,API 管「调了返回什么」。

什么时候用

前后端分离部署

前端和后端部署在不同域名下时,必须在后端设置 CORS 允许前端域名访问,否则浏览器会拦截所有跨域请求。

和 AI 协作时

想让 AI 帮你解决跨域问题时,直接说「我的前端跑在 localhost:3000,后端在 localhost:8080,帮我配一下 CORS 允许这个来源」。

什么时候不用

同源部署的应用

如果前后端部署在同一域名下(如通过 Nginx 反向代理统一入口),所有请求同源,无需配置 CORS。

与浏览器安全策略无关的项目

如果你只做后端 API 或命令行工具、不涉及浏览器访问,CORS 机制与你无关。

组成结构 · Anatomy

1
核心概念Core

浏览器的安全规则:A 网站的 JavaScript 默认不能直接请求 B 网站的 API。需要 B

2
实际表现In Practice

像小区门禁——外人(别的网站)默认进不来,需要业主(服务器)授权放行。

3
与 AI 的关联AI Context

遇到「CORS error」时,和 AI 沟通时提到「接口跨域了」,它就知道要加允许头。

典型使用场景

解决跨域报错
告诉 AI「前端调接口报跨域错误,帮我在后端加 CORS 配置,允许指定域名的请求带 cookie」
想弄懂概念时
告诉 AI「用大白话给我解释什么是跨域,举个生活中的例子」

延伸阅读