一、什么是同源策略Same-Origin Policy浏览器有一个核心安全机制——同源策略。它规定了只有同源的页面之间才能正常互相请求资源非同源的请求浏览器会拦截这种现象就是我们常说的跨域。1. 同源判断的三个条件必须同时满足以下三个条件才属于同源协议相同域名IP相同端口相同任意一个不一样都属于跨域。2. 举例说明假设当前页面地址为http://localhost:8080/index.html请求地址是否跨域不同点http://localhost:8080/user❌ 不跨域三者完全一致https://localhost:8080/user✅ 跨域协议 http ≠ httpshttp://127.0.0.1:8080/user✅ 跨域域名 localhost ≠ 127.0.0.1http://localhost:8081/user✅ 跨域端口 8080 ≠ 8081http://api.baidu.com✅ 跨域域名不同⚠️注意同源策略限制的是浏览器发起的 AJAX / Fetch 请求img、script、link等标签加载资源不受同源限制这也是为什么我们可以直接引用第三方 CDN 的图片、JS 库等。二、为什么浏览器要搞同源策略核心目的防止 CSRF跨站请求伪造攻击。一个典型的攻击场景你登录了银行网站bank.com浏览器中保存了登录凭证Cookie。你不小心打开了恶意网站hack.com。如果没有同源限制hack.com页面可以偷偷发起一个 AJAX 请求到bank.com/transfer浏览器会自动带上你的银行 Cookie从而在你不经意间完成转账操作。同源策略通过阻止恶意页面的 AJAX 请求有效保护了用户数据的安全。三、跨域是如何被拦截的跨域的拦截是由浏览器执行的而不是后端。浏览器在收到后端返回的数据后会检查响应头中的Access-Control-Allow-Origin字段判断是否放行。完整时序示例假设我们有以下两个地址前端页面http://127.0.0.1:5173Vue 开发服务器后端接口http://127.0.0.1:8080/api/login整个流程如下浏览器 JS 发起 AJAX / Fetch 请求访问后端接口http://127.0.0.1:8080/api/login。请求顺利到达后端后端正常执行业务逻辑并返回数据。后端在响应中附带如下响应头Access-Control-Allow-Origin: http://127.0.0.1:5173响应数据包返回到浏览器。浏览器执行校验当前页面源http://127.0.0.1:5173响应头允许的源http://127.0.0.1:5173✅ 匹配成功 → 将返回的数据交给前端 JS 使用。如果没有设置该响应头即使后端正常返回了数据浏览器在比对时找不到Access-Control-Allow-Origin头会认为这是一个不被允许的跨域请求从而拦截响应JS 无法获取到返回结果并在控制台输出典型的 CORS 跨域错误。四、常用的 CORS 响应头详解除了Access-Control-Allow-Origin还有几个配套的响应头常常一起出现。它们控制着跨域请求的更多细节下面逐一说明。1.Access-Control-Allow-Methods作用告诉浏览器服务器允许哪些 HTTP 方法跨域访问。默认情况下浏览器只允许跨域请求使用三种“安全”方法GET、POST、HEAD简单请求。如果你的前端要发PUT、DELETE、PATCH等请求浏览器会先发一个预检请求OPTIONS询问服务器“我能用 DELETE 吗”服务器在预检响应中返回这个头明确允许哪些方法浏览器才会正式发送实际请求。如果没有这个头或者其中不包含前端使用的方法比如 DELETE那么该请求就会被浏览器直接拦截根本到不了服务器。示例Access-Control-Allow-Methods: GET, POST, PUT, DELETE2.Access-Control-Allow-Headers作用告诉浏览器服务器允许携带哪些自定义的请求头。前端有时需要在请求中额外传递信息例如Content-Type: application/jsonaxios 默认的 POST 格式token自己定义的身份验证字段X-Requested-With等只要请求头超出了浏览器默认的“简单头”如Accept、Accept-Language、Content-Type的特定值浏览器同样会先发送预检请求询问“我能带上token这个头吗”服务器必须在响应中明确列出允许的自定义头浏览器才会放行。如果服务器没写Access-Control-Allow-Headers: token那么前端在请求中带上token头就会被拦截。示例Access-Control-Allow-Headers: Content-Type, token这里表示允许携带Content-Type通常指application/json和自定义的token头。3.Access-Control-Allow-Credentials作用是否允许跨域请求携带 Cookie 或 HTTP 认证信息。默认情况下跨域的 AJAX 请求不会自动附带 Cookie即使浏览器中已有对应 Cookie。如果需要跨域请求也能把 Cookie比如登录凭证带过去前后端必须同时配置后端设置Access-Control-Allow-Credentials: true前端设置withCredentials: true如axios({ withCredentials: true })或fetch的credentials: include⚠️重要限制当credentials为true时Access-Control-Allow-Origin不能是星号*必须指定具体源例如http://127.0.0.1:5173。示例Access-Control-Allow-Origin: http://127.0.0.1:5173Access-Control-Allow-Credentials: true这样前端跨域请求才能携带该源下的 Cookie并且浏览器才会把带 Cookie 的响应数据交给 JS。常见组合配置假设你使用 Vue 前端http://localhost:5173调用后端接口http://localhost:8080/api/user请求方法是DELETE并需要在请求头中携带token同时还要带上 Cookie。那么后端需要设置如下响应头Access-Control-Allow-Origin: http://localhost:5173Access-Control-Allow-Methods: GET, POST, PUT, DELETEAccess-Control-Allow-Headers: Content-Type, tokenAccess-Control-Allow-Credentials: true这样浏览器才能顺利通过预检并正常执行跨域请求、携带 Cookie。五、总结同源策略是浏览器的安全基石通过协议、域名、端口三要素判断是否同源。跨域限制主要针对 AJAX / Fetch 请求但资源性标签img、script、link不受影响。跨域拦截发生在浏览器端后端可以正常处理请求但浏览器会检验响应头决定是否放行。CORS跨域资源共享是通过设置一系列Access-Control-*响应头来安全实现跨域数据交互其中Allow-Methods、Allow-Headers、Allow-Credentials分别控制请求方法、自定义头和凭证携带。理解了这些原理就能更好地配置后端 CORS 策略解决开发中常见的跨域问题。