JavaScript跨域请求受同源策略限制,CORS是服务端配置响应头的标准方案,支持所有HTTP方法及凭证;JSONP是客户端利用script标签的兼容方案,仅支持GET且存XSS风险。

JavaScript跨域请求,本质是浏览器出于安全考虑实施的同源策略限制:当页面脚本试图向非同源(协议、域名、端口任一不同)的服务器发起请求时,XMLHttpRequest 或 fetch 默认被拦截。要突破这个限制,CORS 和 JSONP 是两种典型方案,但原理、能力与适用场景差异明显。
CORS 是服务端驱动的标准方案
CORS(Cross-Origin Resource Sharing)是 W3C 标准,依赖服务器在响应头中明确声明允许哪些源访问资源。浏览器自动处理整个流程,开发者调用 fetch 或 XMLHttpRequest 的方式和同源请求完全一样。
- 支持所有 HTTP 方法(GET、POST、PUT、DELETE 等),可传 Cookie(需设置 withCredentials: true 并服务端配 Access-Control-Allow-Credentials: true)
- 简单请求(如 GET/POST + 纯文本 Content-Type)直接发送;复杂请求(如带自定义 header 或 Content-Type: application/json)会先发 OPTIONS 预检请求
- 服务端必须配置关键响应头,例如:
Access-Control-Allow-Origin(指定允许的源,不能为 * 时配合 credentials)
Access-Control-Allow-Methods
Access-Control-Allow-Headers - 现代浏览器全支持(IE10+),错误可捕获、调试信息清晰
JSONP 是客户端绕过的兼容性方案
JSONP 不是标准协议,而是利用 标签不受同源策略限制的特性,通过动态插入 script 请求一个返回函数调用的 JS 脚本,实现数据“填充”(Padding)式加载。
- 只支持 GET 请求,无法发送 POST 或携带认证凭证
- 客户端需定义全局回调函数(如 callbackFunc),并将函数名作为 URL 参数(如 callback=callbackFunc)传给服务端
- 服务端必须配合,把 JSON 数据包裹进该函数调用中返回,例如:
callbackFunc({"name": "张三"}) - 无预检开销,但错误难监听(script 加载失败不会触发 onerror 回调,仅靠 timeout 模拟)
- 存在 XSS 风险:若 callback 参数未校验,可能执行恶意代码;且无法限制响应内容类型
选哪个?看实际约束条件
如果能控制服务端,优先用 CORS —— 它更规范、功能完整、安全性更高,也符合现代开发实践。JSONP 仅在两类场景仍有价值:需兼容 IE9 及更老浏览器;或调用第三方 API(如某些老地图接口)只提供 JSONP 接口且不支持 CORS。
立即学习“Java免费学习笔记(深入)”;
注意:两者都不是前端单方面能搞定的方案。CORS 关键在服务端响应头;JSONP 关键在服务端按约定格式返回 JS 调用。缺少任一端配合,都无法生效。











