CORS与JSONP跨域问题解析

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《CORS与JSONP跨域解决方案详解》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

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

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）利用