JS跨域请求详解:JSONP与CORS实现及Post支持
本文详细解析JavaScript实现跨域请求的两种主流方式。首先介绍JSONP通过动态创建script标签实现GET请求的原理及其局限性,随后重点讲解基于CORS的标准跨域方案,通过设置Access-Control-Allow-Origin头支持POST请求,并对比两种方案的代码实现与安全差异。
JSONP跨域原理与jQuery实现
JSONP方式完成跨域操作
jQuery框架下常见的跨域调用手段
$.ajax({
url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php",
dataType: "jsonp",
jsonp: "callback",
context: document.body,
success: function(data) {
console.log(data);
}
});
该调用的核心机制在于 动态生成script标签,把src属性指向目标url,并附加callback参数,格式如下:
<script src="http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php?callback=jQuery211018970995225637144_1465350372062&_=1465350372063"></script>
服务端响应代码示例:
$data = json_encode(array("id" => "1", "name" => "tom"));
$callback = $_GET["callback"];
echo $callback . "(" . $data . ")";
最终返回的数据实质为一段JavaScript代码:
jQuery211018970995225637144_1465350372062({"id":"1","name":"tom"})
浏览器解析并执行此JS代码,进而触发Ajax请求中预设的success回调函数。
JSONP方案的局限性
基于上述原理,JSONP跨域方案仅支持GET请求,无法处理POST请求。若需支持POST,需采用服务器端配置方案,下文将详述。
CORS服务端配置与Post支持
服务器端配置跨域支持
关键在于设置Access-Control-Allow-Origin响应头,用于指定允许访问的源域。服务端代码如下:
// 表示支持所有来源的域进行请求
// 实际在操作过程中可以设置为指定域
header('Access-Control-Allow-Origin:*');
$data = json_encode(array("id" => "1", "name" => "tom"));
echo $data;
前端对应的JavaScript代码:
$.ajax({
type: "POST",
url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/header.php",
dataType: "json",
success: function(data) {
console.log(data);
}
});
此方案支持POST请求。
总结
个人倾向于避免直接使用跨域请求,因其可能引入潜在安全风险。更常用的做法是通过本域服务端与跨域源服务器进行交互。
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
相关标签:
