JS跨域请求详解：JSONP与CORS实现及Post支持

作者：小括号

时间：2026-10-22

本文详细解析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请求。

总结

个人倾向于避免直接使用跨域请求，因其可能引入潜在安全风险。更常用的做法是通过本域服务端与跨域源服务器进行交互。