跨域问题由浏览器同源策略引发，协议、域名或端口不同均会触发。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 即可：
立即学习“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 函数调用，参数是真正的数据。
它的核心原理是：将数据包裹在一个函数调用中，例如：
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 的缺点也很明显：
- 只支持 GET 请求
- 错误处理困难，无法捕获 404 或 500 错误
- 存在安全风险，容易受到 XSS 攻击
- 依赖全局函数，维护性差
如何选择？
优先使用 CORS，它是标准、安全、功能完整的解决方案。只要后端能配合设置响应头，就应首选 CORS。
JSONP 适用于老系统兼容，比如对接某些不支持 CORS 的第三方 API，且仅需获取少量数据的场景。现代项目中已逐渐被淘汰。
基本上就这些。跨域本质是浏览器行为，服务端放开限制才是根本解法。CORS 是正道，JSONP 是备胎。
