js和jquery使用jsonp解决跨域

最新推荐文章于 2025-10-26 22:03:19 发布

原创最新推荐文章于 2025-10-26 22:03:19 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请注明出处。

文章标签：

#jquery #跨域

前端专栏收录该内容

186 篇文章

订阅专栏

本文深入探讨了同源策略及跨域问题，详细介绍了JSONP、WebSocket和CORS三种跨域解决方案，并通过实例演示了如何使用jQuery实现JSONP跨域请求。

- 跨域
  - 使用 jsonp 来解决这个问题

跨域

理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。

何谓同源：

URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。

由于同源策略,而且随着互联网的发展，“同源策略”越来越严格。目前，如果非同源，共有三种行为收到限制。

Cookie、LocalStorage 和 IndexDB 无法读取
DOM 无法获得
Ajax 请求不能发送

同源政策规定，AJAX 请求只能发给同源的网址，否则就报错。
除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制。

JSONP
WebSocket
CORS

文本将介绍分别 js 和 jquery 来使用 jsonp。
后面所有的例子都是运行在服务器环境下的。

好的，用一个简单的例子来引入问题，先看下面的demo：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script>
</head>
<body>
  <script>
    $(document).ready(function(){
      document.write('加载baidu静态资源公共库');
    });
  </script>
</body>
</html>

这是我们开篇用的那个例子，在服务器环境下，能够正常运行，页面会有显示，也就是说我们成功的加载了来自于百度静态资源公共库中的 jquery。
对的，我们跨域了吗？我们跨域了吗？
在这个例子中，其实我们已经跨域了，因为
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script>
这个 jquery 来自于百度静态资源公开库，百度的这个域名肯定与我们本地的不同，但是我们却成功的加载了这段 jquery 代码到我们的页面上。这是为什么呢？

浏览器会进行同源检查（看清楚，这里是浏览器会进行同源检测。）,这导致了跨域问题,然而这个跨域检查还有一个例外那就是 HTML 的 <script> 标记；我们经常使用 <script> 的 src 属性,脚本静态资源放在独立域名下或者来自其它站点的时候这里是一个 url；这个 url 响应的结果可以有很多种，比如 JSON，返回的 json 值成为 <Script> 标签的 src 属性值.这种属性值变化并不会引起页面的影响。按照惯例，浏览器在 url 的查询字符串中提供一个参数，这个参数将作为结果的前缀一起返回到浏览器;

Web页面上调用 js 文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力，比如 <script>、<img>、<iframe>）
在浏览器中，<script、<img>、<iframe>、<link> 等标签都可以加载跨域资源，但浏览器限制了 JavaScript 的权限使其不能读、写加载的内容。
另外同源策略只对网页的 HTML 文档做了限制，对加载的其他静态资源如 javascript 、 css、图片等仍然认为属于同源。

这就是为什么我们可以使用 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script> 来加载跨域的资源的原因。

OK，下面我们来看一个 没跨域的情况下 使用 jquery 发出请求加载数据的例子：
后台代码（result.php）：

<?php
    if($_GET) {
        $str = '{"id":"get"}'; 
        echo $str;
    }   
    if($_POST){
        $str = '{"id":"post"}'; 
        echo $str;
    }
?>

我们在 demo.html 中使用 jquery 分别使用 GET 和 POST 方式向 result.php 发出请求：
demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="#" id="jq-get">jq-get</a>
    <br>
    <a href="#" id="jq-post">jq-post</a>
    <br>
    <p>后台返回的数据如下：</p>
    <div id="result"></div>
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script>
    <script>
        $('#jq-get').click(function(){
            $.ajax({
                type: "GET",
                url: "http://10.2.229.89:8082/test-jq-jsonp/jsonp.php",
                data: {
                    "a": 1
                },
                dataType: "json",
                success: function(data){
                    $('#result').html(data.id);
                }
            });
        });

        $('#jq-post').click(function(){
            $.ajax({
                type: "POST",
                url: "http://10.2.229.89:8082/test-jq-jsonp/jsonp.php",
                data: {
                    "a": 1
                },
                dataType: "json",
                success: function(data){
                    $('#result').html(data.id);
                }
            });
        }); 
    </script>
</body>
</html>

demo.html 与 result.php 均在 8082 端口下，不存在跨域的情况，
运行效果图如下：

可见，在没有跨域的情况下，是很好用的。

下面，我们将 demo.html 移到本机的另一个端口(port: 3000)下，那么 demo.html 与 result.php 就存在了跨域的情况：

使用 jsonp 来解决这个问题

$('#jq-get').click(function(){
    $.ajax({
        type: "GET",
        url: "http://10.2.229.89:8082/test-jq-jsonp/jsonp.php",
        data: {
            "a": 1
        },
        dataType: "jsonp",
        success: function(data){
            $('#result').html(data.id);
        }
    });
});

result.php也有一点改动

if($_GET) {
    $jsonp = $_REQUEST["callback"]; 
    $str = '{"id":"get"}'; 
    $str = $jsonp . "(" .$str.")"; 
    echo $str;
}

关于 jsonp 为什么要这么写，结合文章开头说的 <script> 标签拥有跨域的能力以及之前的一篇文章关于JSON和JSONP的详解

那么，我们 POST 方式能不能这样用呢？

$('#jq-post').click(function(){
    $.ajax({
        type: "POST",
        url: "http://10.2.229.89:8082/test-jq-jsonp/jsonp.php",
        data: {
            "a": 1
        },
        dataType: "jsonp",
        success: function(data){
            $('#result').html(data.id);
        }
    });
});

我们测试以后可以发现，虽然我们设置的是 POST 方式，但是调用的还是 GET 方法。那么 POST 方式跨域要如何解决呢？

我们需要在后台代码（result.php）文件头加入请求头和跨域权限：

<?php
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods:POST');

    if($_POST){
        $str = '{"id":"post"}';
        echo $str;
    }   
?>