CORS与JSONP跨域方法解析

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《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） 是一种利用