什么是javascript跨域请求_CORS和JSONP有什么区别？_网络技术

发布时间 - 2025-12-25 00:00:00 点击率：次

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

JavaScript跨域请求，本质是浏览器出于安全考虑实施的同源策略限制：当页面脚本试图向非同源（协议、域名、端口任一不同）的服务器发起请求时，XMLHttpRequest 或 fetch 默认被拦截。要突破这个限制，CORS 和 JSONP 是两种典型方案，但原理、能力与适用场景差异明显。

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 不是标准协议，而是利用标签不受同源策略限制的特性，通过动态插入 script 请求一个返回函数调用的 JS 脚本，实现数据“填充”（Padding）式加载。

只支持 GET 请求，无法发送 POST 或携带认证凭证
客户端需定义全局回调函数（如 callbackFunc），并将函数名作为 URL 参数（如 callback=callbackFunc）传给服务端
服务端必须配合，把 JSON 数据包裹进该函数调用中返回，例如：
callbackFunc({"name": "张三"})
无预检开销，但错误难监听（script 加载失败不会触发 onerror 回调，仅靠 timeout 模拟）
存在 XSS 风险：若 callback 参数未校验，可能执行恶意代码；且无法限制响应内容类型

如果能控制服务端，优先用 CORS —— 它更规范、功能完整、安全性更高，也符合现代开发实践。JSONP 仅在两类场景仍有价值：需兼容 IE9 及更老浏览器；或调用第三方 API（如某些老地图接口）只提供 JSONP 接口且不支持 CORS。

注意：两者都不是前端单方面能搞定的方案。CORS 关键在服务端响应头；JSONP 关键在服务端按约定格式返回 JS 调用。缺少任一端配合，都无法生效。