JS跨域问题及CORSJSONP解决方案
时间：2025-11-03 19:45:54 491浏览 收藏
**JS跨域问题终极指南：CORS与JSONP解决方案详解** 在前端开发中，跨域问题是开发者经常遇到的挑战。本文深入剖析了由同源策略引发的JS跨域难题，并详细介绍了两种主流解决方案：CORS（跨域资源共享）和JSONP。CORS作为现代项目首选方案，通过服务器端配置响应头，灵活支持各种HTTP请求方式。而JSONP则利用`
跨域问题由同源策略引起，主流解决方案为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 是一种利用