17370845950

JavaScript跨域问题本质是浏览器同源策略限制，CORS为现代标准方案，需服务端配置响应头；JSONP是利用script标签无跨域限制的取巧方法，仅支持GET且安全性弱；优先选CORS，JSONP仅作兜底。

JavaScript 的跨域问题本质是浏览器的同源策略限制：只要协议、域名、端口三者中任一不同，就视为不同源，AJAX 请求就会被拦截。解决的核心思路是绕过或说服浏览器允许跨域通信。CORS 和 JSONP 是两种最典型的方法，原理和适用场景差异明显。

CORS（跨域资源共享）原理与用法

CORS 是现代标准方案，靠服务器主动声明“谁可以访问我”。浏览器在发起跨域请求时，会先检查响应头中是否包含合法的 Access-Control-Allow-Origin 字段。如果匹配当前页面源（如 https://a.com），就放行响应；否则报错。

• 简单请求（如 GET/POST 且 Content-Type 为 text/plain、application/x-www-form-urlencoded、multipart/form-data）直接发送，服务器只需返回正确响应头即可
• 非简单请求（如带自定义 header、PUT/DELETE 方法、JSON 数据体）会先发一个 OPTIONS 预检请求，服务器必须正确响应预检，后续真实请求才发出
• 服务端需设置的关键响应头包括：
  Access-Control-Allow-Origin（指定允许的源，不能和 credentials 共存时设为 *）
  Access-Control-Allow-Methods（如 GET, POST, PUT）
  Access-Control-Allow-Headers（客户端实际发送的额外 header）
  Access-Control-Allow-Credentials（若需带 cookie，此值必须为 true，且 Origin 不能为 *）
• 前端无需特殊处理，fetch 或 XMLHttpRequest 按正常方式写，浏览器自动协商

JSONP 原理与局限

JSONP 不是真正的“协议”，而是一种利用浏览器对 标签无跨域限制的“取巧”手段。它把数据包装成函数调用的形式，由服务端动态生成 JS 脚本并执行。

• 客户端提前定义一个全局回调函数（如 window.cb = function(data){...}）
• 动态创建
• 服务端收到请求后，返回类似 cb({"name":"Tom","age":25}) 的 JS 代码
• 浏览器加载并执行该脚本，从而触发回调，拿到数据
• 只支持 GET 请求，无法设置 header、无法捕获网络错误、无法控制超时、安全性弱（执行第三方 JS，易受 XSS 影响）
• 必须服务端配合——返回内容格式要严格匹配回调函数名，否则执行失败

怎么选：CORS 还是 JSONP？

优先用 CORS。它支持所有 HTTP 方法、可携带凭证、有完善的错误反馈机制，是 W3C 标准。JSONP 仅作为兜底方案，适用于老系统或纯静态页面无法配置服务端响应头的极少数场景。

如果服务端不可控，还可考虑代理（开发用 webpack devServer proxy / 生产用 Nginx 反向代理），本质是让前端请求先打到同源服务器，再由它转发，彻底规避浏览器跨域检查。