JavaScript跨域解决方案_CORS与JSONP-js教程-PHP中文网

JavaScript跨域解决方案_CORS与JSONP

夢幻星辰

发布： 2025-11-29 21:29:02

原创

316人浏览过

跨域问题由浏览器同源策略引发，协议、域名或端口不同均会触发。CORS 是现代主流方案，通过服务器设置 Access-Control-Allow-Origin 等响应头实现，支持所有 HTTP 请求，需后端配合；前端正常调用 fetch 或 XMLHttpRequest 即可，复杂请求会先发送 OPTIONS 预检。JSONP 利用 script 标签不受同源限制的特性，仅支持 GET 请求，需服务端返回函数调用形式数据，存在安全风险与错误处理难题。优先选用 CORS，因其标准、安全、功能完整；JSONP 适用于老旧系统兼容场景，已逐步被淘汰。根本解决跨域需服务端配置，CORS 为正道，JSONP 作备选。

javascript跨域解决方案_cors与jsonp

跨域问题在前端开发中很常见，主要是由于浏览器的同源策略限制。当协议、域名或端口任一不同时，就会触发跨域。为解决这个问题，CORS 和 JSONP 是两种经典方案。它们各有适用场景和局限性，下面分别介绍。

CORS：现代主流的跨域方案

CORS（Cross-Origin Resource Sharing，跨域资源共享）是 W3C 标准，通过服务器设置响应头来允许浏览器进行跨域请求。它基于 HTTP 头部机制，支持所有类型的 HTTP 请求（GET、POST、PUT 等），使用起来更灵活安全。

实现 CORS 的关键是服务器端配置：

允许特定来源访问：Access-Control-Allow-Origin: https://example.com
允许携带凭证（如 Cookie）：Access-Control-Allow-Credentials: true
预检请求响应头（针对复杂请求）：Access-Control-Allow-Methods 和 Access-Control-Allow-Headers

前端代码无需特殊处理，正常使用 fetch 或 XMLHttpRequest 即可：

立即学习“Java免费学习笔记（深入）”；

fetch('https://api.other-domain.com/data', {
  method: 'POST',
  credentials: 'include',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'test' })
})
.then(res => res.json())
.then(data => console.log(data));

登录后复制

注意：如果请求携带了自定义头部或使用了非简单方法，浏览器会先发送 OPTIONS 预检请求，服务器必须正确响应才能继续。

JSONP：古老但兼容性好的方案

JSONP（JSON with Padding）利用 <script> 标签不受同源策略限制的特性，通过动态创建 script 标签向服务器请求数据。服务器需返回一段 JavaScript 函数调用，参数是真正的数据。

它的核心原理是：将数据包裹在一个函数调用中，例如：

牛小影

牛小影 - 专业的AI视频画质增强器

420

查看详情

myCallback({"name": "张三", "age": 25});

前端需要预先定义这个函数：

function myCallback(data) {
  console.log('收到数据:', data);
}

登录后复制

手动实现 JSONP 可以这样写：

function jsonp(url, callbackName) {
  const script = document.createElement('script');
  script.src = `${url}?callback=${callbackName}`;
  document.head.appendChild(script);
}
jsonp('https://api.other-domain.com/user', 'myCallback');

登录后复制

JSONP 的缺点也很明显：