JS跨域请求怎么解决_JS跨域问题与CORSJSONP解决方法教程-js教程-PHP中文网

JS跨域请求怎么解决_JS跨域问题与CORSJSONP解决方法教程

絕刀狂花

发布： 2025-11-08 15:29:09

原创

325人浏览过

跨域问题由同源策略引起，主流解决方案为CORS和JSONP。CORS通过服务器设置Access-Control-Allow-Origin等响应头实现，支持所有HTTP方法，是现代项目首选方案；JSONP利用script标签不受同源限制的特性，仅支持GET请求，存在安全性和错误处理缺陷，适用于老旧系统或无法使用CORS的场景。开发中应优先配置CORS，调试时通过浏览器开发者工具检查请求响应头。

js跨域请求怎么解决_js跨域问题与corsjsonp解决方法教程

跨域请求是前端开发中常见的问题，当页面的协议、域名或端口与请求的目标地址不一致时，浏览器出于安全考虑会阻止该请求，这就是所谓的“同源策略”。JavaScript在发起AJAX请求时如果遇到跨域问题，会出现错误。以下是两种主流解决方案：CORS 和 JSONP。

CORS（跨域资源共享）

CORS 是目前最推荐的跨域解决方案，它通过服务器设置响应头来允许特定来源的请求。

原理： 浏览器在发送跨域请求时，会自动附加 Origin 头。服务器收到请求后，判断是否允许该来源，并在响应头中添加 Access-Control-Allow-Origin 等字段。

使用方法：

前端正常使用 fetch 或 XMLHttpRequest 发起请求，无需特殊处理。
后端需设置响应头，例如在 Node.js + Express 中：

res.header('Access-Control-Allow-Origin', 'http://example.com');
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 请求。

奇域

奇域是一个专注于中式美学的国风AI绘画创作平台

查看详情

原理： 动态创建 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 的场景下使用。