javascript中ajax跨域本质由后端cors响应头决定,前端无需主动编码;浏览器自动检查协议、域名、端口是否同源,简单请求仅需access-control-allow-origin,非简单请求须预检options并返回完整cors头。

JavaScript 中 Ajax 处理跨域请求,本质上不需要前端“写代码解决”,而是依赖后端正确返回 CORS 响应头;浏览器自动判断是否放行,前端 fetch 或 XMLHttpRequest 照常调用即可。
哪些情况会触发跨域检查
只要协议、域名、端口任一不同,就属于跨域。例如:
- http://localhost:3000 → http://localhost:8080(端口不同)
- https://a.com → http://a.com(协议不同)
- http://a.com → http://b.com(域名不同)
注意:、<script>、<link></script>等标签加载资源不受同源策略限制,只有脚本发起的 XMLHttpRequest 或 fetch 请求才受约束。
简单请求与非简单请求的区别
浏览器自动分类,但理解它能快速定位失败原因:
- 简单请求:方法为 GET/HEAD/POST,且 Content-Type 是 text/plain、application/x-www-form-urlencoded 或 multipart/form-data;只检查响应头中的 Access-Control-Allow-Origin
- 非简单请求:如 PUT、DELETE、带 Authorization 头、或 POST 发送 JSON(Content-Type: application/json);浏览器会先发一次 OPTIONS 预检请求,后端必须响应成功并返回完整 CORS 头,主请求才会发出
前端需注意的关键配置点
虽然不负责设响应头,但前端操作不当会直接导致失败:
- 发送 JSON 数据时,避免无必要地加自定义 header(比如 Authorization),否则简单请求变非简单,而很多后端没配 OPTIONS 路由
- 需要传 Cookie 或 token 时,fetch 必须加 credentials: 'include',XHR 要设 withCredentials = true;此时后端 Access-Control-Allow-Origin 不能为 *,必须写具体域名
- 若需读取响应里的自定义 header(如 X-Request-ID),后端必须通过 Access-Control-Expose-Headers 显式声明
后端必须返回的核心响应头
这些字段由服务端设置,不是前端加的。典型组合如下:
- Access-Control-Allow-Origin:必填。开发可用 'http://localhost:3000',生产避免用 *
- Access-Control-Allow-Methods:列出允许方法,如 'GET, POST, PUT, DELETE';不能写 *
- Access-Control-Allow-Headers:预检必需。前端若发了 X-Token 或 Authorization,这里就得包含对应字段
- Access-Control-Allow-Credentials:设为 true 才能传递 Cookie 或 bearer token
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











