jsonp解决跨域问题

已于 2023-04-13 15:16:30 修改
阅读量379 收藏 1
点赞数
文章标签： javascript 前端 html
于 2023-04-13 13:39:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shj_php/article/details/130128484
版权
文章通过三个测试例子详细解释了如何利用JSONP来解决浏览器的同源策略限制，实现跨域数据交互。从手动创建script标签到使用jQuery的AJAX方法，展示了JSONP的工作原理。同时，提到了更简单的解决方案，即在PHP服务器端设置响应头`Access-Control-Allow-Origin:*`来允许跨域请求。
摘要由CSDN通过智能技术生成

jsonp解决跨域问题

测试1:

a.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var localHandler = function (data) {
            alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
        };
    </script>
    <script type="text/javascript" src="http://localhost/across_test/remote.js"></script>
</head>
<body>

</body>
</html>
remote.js
localHandler({"result": "this is the remote.js content!!!"});

浏览器访问, 响应结果如下:

在这里插入图片描述

测试2:

a.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        // 得到航班信息查询结果后的回调函数
        var flightHandler = function (data) {
            alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
        };
        // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
        var url = "http://localhost/across_test/remote.js";
        // 创建script标签，设置其属性
        var script = document.createElement('script');
        script.setAttribute('src', url);
        // 把script标签加入head，此时调用开始
        document.getElementsByTagName('head')[0].appendChild(script);
    </script>
</head>
<body>

</body>
</html>
remote.js
flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});

访问效果:

在这里插入图片描述

测试3:

a.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://localhost/across_test/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "get",
                async: false,
                url: "http://localhost/across_test/logic.php?code=CA1998",
                dataType: "jsonp",
                jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                jsonpCallback: "flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
                success: function (json) {
                    console.log(json)
                    alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
                },
                error: function () {
                    alert('fail');
                }
            });
        });
    </script>
</head>
<body>
</body>
</html>
logic.php
<?php
    
$json = json_encode([
    "code" => "CA1998",
    "price" => 1780,
    "tickets" => 5
]);
$callback = $_GET['callback'];
echo $callback . "($json)";

访问效果:

在这里插入图片描述

更简单的方式解决跨域请求
在PHP响应数据时, 添加一个响应头即可

a.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://localhost/across_test/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "get",
                url: "http://localhost/across_test/logic.php?code=CA1998",
                success: function (json) {
                    console.log(json)
                },
                error: function () {
                    alert('fail');
                }
            });
        });
    </script>
</head>
<body>
</body>
</html>
logic.php

<?php

header('Access-Control-Allow-Origin: *');
$json = json_encode([
    "code" => "CA1998",
    "price" => 1780,
    "tickets" => 5
]);

echo $json;

效果如下:
在这里插入图片描述

hello php
关注
Jsonp解决跨域问题原理
qq_38482933的博客
08-04 477
1.什么是Jsonp？ Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。 为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。 同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。 JSONP由两部分组成：回调函数和数据，回调函数一般是在浏览器控制，作为参数发往服务器端（当然，你也可以固定回调函数的名字，
jsonp跨域处理碰到的坑
leaves_story的博客
08-29 3336
哎，，，好坑啊，，记录一下，网上的各种版本都有，但总有这样那样的问题， 一、错误代码（这个是错误的） 前端： 后端 在这里被坑了好久，刚开始以为返回的格式不对，emmmmm检查了好久，还是一直报错： 注意：有些人的代码会写上jsonp和jsonpCallback属性 也是可以的，jsonp默认就是callback，但如果写了jsonpCallback注意与后端中包裹数据...
跨域数据请求技术JSONP详解
最新发布
繁依Fanyi的博客
06-20 1906
当谈到 JSONP，就像是在谈论你在一场派对上认识的新朋友一样。让我们从头开始介绍。JSONP，简称 JSON with Padding，是一种利用标签进行跨域数据请求的技术。它允许你在网页中请求来自其他域的数据，而无需担心浏览器的同源策略（Same-Origin Policy）带来的限制。以一个简单的比喻来说，就像你在一家餐馆点菜一样。你可以在自己家里使用电话点餐，然后等着外卖送达，而不需要亲自去餐馆。JSONP允许你在当前页面中加载其他网站的数据，就像是通过电话点餐一样轻松。
php josnp_浅析php中jsonp的跨域实例
weixin_42385930的博客
03-08 91
我们现在www.test.com这个域名下面有这么个html文件testjsonp.html：Untitled PagejQuery(document).ready(function(){$.ajax({type: "GET",async: false,//url: "http://test/jsonp.php",url:"http://mytaobao.com/jsonp.php",dataTy...
使用JSONP解决跨域
热门推荐
daisy
05-16 1万+
1.首先需要知道什么是跨域 浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域 出于浏览器的同源策略限制 同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响 *同源策略限制内容有： Cookie、LocalStorage、IndexedDB 等存储性内容 DOM 节点 AJAX 请求发送后，结果被浏览器拦截了 2.什么是JSONP？ JSONP是JSON with P
使用jsonp解决跨域问题
路上
06-27 178
使用jsonp解决跨域问题
JSONP解决跨域问题
10-16
JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了`<script>`标签可以跨域请求资源的特性，为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中，前端使用...
使用jsonp完美解决跨域问题
12-12
这个和安全机制有关，默认不允许跨域调用 处理手段：使用jsonp格式， ajax请求参数dataType:’JSONP’。 代码如下: $.ajax({  url: “http://…….”,  type: ‘GET’,  dataType: ‘JSONP’,//here  success:...
Jsonp解决跨域问题
菜园子丶For丨丶Tomorrow的博客
11-27 5473
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的&lt;script&gt; 元素是一个例外。利用 &lt;script&gt; 元素的这个开放策略，网页可以得到从其他来源动...
JSONP三种方式解决跨域问题
04-19
1、地址...演示跨域问题以及跨子域名解决方法 2、地址http://a.test.com:8888/testAjaxCross/public/jsonp.do 演示jsonp解决跨域问题的三种方案jsonp、$getJSON、$ajax等
Jsonp解决跨域
happy0012002的专栏
05-25 1702
查阅网上解决跨域的方式，主要有以下几种 1、使用jsonp方式 jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。 1.1第一版： 后端，采用nginx字节返回固定对象 location /test1 { default_type ...
JSONP解决跨域
qq_63479468的博客
05-06 1801
一、同源政策 1.什么是同源 如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不同，就是不同源 2.同源政策的目的 同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指A网站在客户端设置的Cookie，B网站是不能访问的 随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax请求，如果请求，浏览器就会报错。 ...
详解jsonp解决跨域问题的原理与实例
解决了在不同源之间共享数据的问题，但在现代浏览器中，由于CORS（Cross-Origin Resource Sharing）标准的普及，JSONP已经逐渐被CORS取代，因为CORS提供了更强大且安全的跨域解决方案。不过，了解JSONP的原理和用法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值