跨域问题由同源策略引起，主流解决方案为CORS和JSONP。CORS通过服务器设置Access-Control-Allow-Origin等响应头实现，支持所有HTTP方法，是现代项目首选方案；JSONP利用script标签不受同源限制的特性，仅支持GET请求，存在安全性和错误处理缺陷，适用于老旧系统或无法使用CORS的场景。开发中应优先配置CORS，调试时通过浏览器开发者工具检查请求响应头。
跨域请求是前端开发中常见的问题，当页面的协议、域名或端口与请求的目标地址不一致时，浏览器出于安全考虑会阻止该请求，这就是所谓的“同源策略”。JavaScript在发起AJAX请求时如果遇到跨域问题，会出现错误。以下是两种主流解决方案：CORS 和 JSONP。
CORS（跨域资源共享）
CORS 是目前最推荐的跨域解决方案，它通过服务器设置响应头来允许特定来源的请求。
原理： 浏览器在发送跨域请求时，会自动附加 Origin 头。服务器收到请求后，判断是否允许该来源，并在响应头中添加 Access-Control-Allow-Origin 等字段。
使用方法：
- 前端正常使用 fetch 或 XMLHttpRequest 发起请求，无需特殊处理。
- 后端需设置响应头，例如在 Node.js + Express 中：
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
注意：生产环境中不要使用 *，应明确指定可信来源以保障安全。
对于带有凭证（如 cookies）的请求，还需设置：
res.header('Access-Control-Allow-Credentials', 'true');// 前端请求时也要设置 withCredentials = true
预检请求（Preflight Request）
某些复杂请求（如使用自定义头或非简单方法）会先发送 OPTIONS 请求探测服务器是否支持跨域。服务器必须正确响应这个 OPTIONS 请求，否则主请求会被拦截。
解决方式： 确保服务器对 OPTIONS 请求返回正确的 CORS 头，并结束响应。
JSONP（JSON with Padding）
JSONP 是一种利用 <script> 标签不受同源策略限制的特性来实现跨域的方法，只支持 GET 请求。</script>
原理： 动态创建 script 标签，src 指向目标接口，并传递一个回调函数名。服务器返回一段调用该函数的 JavaScript 代码，将数据作为参数传入。
前端示例：
function handleResponse(data) {console.log(data);
}
const script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);
服务端返回内容应为：
handleResponse({"name": "John", "age": 30});JSONP 缺点明显：仅支持 GET、无法捕获 HTTP 错误、安全性较低（易受 XSS 攻击），因此只建议在老旧系统或不支持 CORS 的场景下使用。
总结与建议
现代项目优先使用 CORS，配置灵活且支持所有 HTTP 方法。JSONP 作为兼容性备选方案，在没有服务器控制权且只能 GET 请求时可临时使用。
开发中若遇跨域问题，先确认是前端发起的请求类型，再检查服务端是否正确设置了 CORS 响应头。调试时可通过浏览器开发者工具查看网络请求和响应头信息。
基本上就这些，掌握 CORS 就能解决绝大多数 JS 跨域问题。
