JS跨域解决方案_CORS与JSONP详解

跨域问题由浏览器同源策略引发，CORS和JSONP是两种主要解决方案。1. CORS通过服务端设置Access-Control-Allow-Origin等响应头，允许浏览器接收跨域请求，支持所有HTTP方法，分简单请求和预检请求处理，前端无需特殊配置。2. JSONP利用script标签不受同源限制的特性，通过回调函数获取数据，仅支持GET请求，需服务端返回JS代码执行回调，兼容性好但安全性低。3. 推荐优先使用CORS，因其更安全灵活；JSONP可作为不支持CORS时的降级方案，适用于无法修改服务端或老旧环境。4. 实际开发中应统一由服务端配置CORS以简化前端逻辑，避免随意暴露接口。

跨域问题是前端开发中常见的难题，主要由于浏览器的同源策略限制。当协议、域名或端口任一不同时，就会触发跨域。为解决这个问题，CORS 和 JSONP 是两种经典方案。下面详细说明它们的原理和使用方式。

CORS：跨域资源共享

CORS（Cross-Origin Resource Sharing） 是 W3C 标准，通过在服务器端设置响应头，允许浏览器接收来自不同源的请求。它支持所有 HTTP 方法，是目前主流的跨域解决方案。

实现 CORS 的关键在于服务端配置响应头：

• Access-Control-Allow-Origin：指定允许访问的源，例如 * 或 https://example.com
• Access-Control-Allow-Methods：允许的请求方法，如 GET、POST 等
• Access-Control-Allow-Headers：允许携带的请求头字段
• Access-Control-Allow-Credentials：是否允许携带凭据（如 Cookie），若启用，前端需设置 withCredentials: true

浏览器会根据请求类型区分简单请求和预检请求（preflight）：

• 简单请求：满足特定条件（如方法为 GET/POST，Content-Type 为 text/plain、application/x-www-form-urlencoded、multipart/form-data），直接发送请求
• 预检请求：非简单请求（如带自定义头、PUT 方法）会先发一个 OPTIONS 请求询问服务器是否允许，确认后才发送真实请求

前端使用 fetch 或 XMLHttpRequest 发起请求时无需特殊处理，只要服务端正确配置即可。

JSONP：利用 script 标签绕过限制

JSONP（JSON with Padding） 是一种利用 <script> 标签不受同源策略限制的特性来实现跨域的方法。它只支持 GET 请求，适合获取数据的场景。

其核心原理是将回调函数名作为参数传给后端，服务器返回一段 JavaScript 调用该函数并传入数据。

示例代码如下：

奇域

奇域是一个专注于中式美学的国风AI绘画创作平台

30

查看详情

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

// 动态创建 script 标签
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

服务器需返回类似这样的 JS 代码：

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

优点是兼容性好，适用于老旧浏览器；缺点是仅支持 GET，无法处理错误状态码，安全性较低（易受 XSS 攻击），且难以控制请求超时。

如何选择：CORS vs JSONP

CORS 更现代、灵活，支持各种 HTTP 方法和请求头，适合大多数场景。推荐优先使用 CORS。

JSONP 可作为降级方案，用于不支持 CORS 的旧环境或无法修改服务端的情况。

注意：JSONP 需要服务端配合返回特定格式，不能用于调用任意第三方 API。

基本上就这些。掌握这两种方式，能应对大部分跨域需求。实际项目中，建议统一由服务端配置 CORS 来简化前端逻辑。

以上就是JS跨域解决方案_CORS与JSONP详解的详细内容，更多请关注php中文网其它相关文章！