ajax同源策略,JS里AJAX的使用--（同源策略，如何规避同源策略的jsonp）

迷南。 2022-09-03 13:24 218阅读 0赞

同源策略：

什么是同源：只有在两个页面的协议(http：//或者https：//)、域名(www.baidu.com)、端口号(80端口，默认是80)都相同的情况下，这两个页面才是同源的。

同源策略限制的能力：非同源的两个页面，不能互相访问对方设置的本机存储数据、不能互相操作对方的DOM、ajax不能互相发送请求。

什么是跨域：在一台服务器的页面中，请求另一台服务器的数据。这种行为就是跨域(两个非同源服务器互相请求数据)。

AJAX规避同源策略(JSONP)：

jsonp的本质：

1、利用标签的src属性可以加载任意服务器的接口内容的特性，把要请求的跨域服务器接口设置在该src属性中，并凭借一个回调函数作为参数；

2、在服务器端收到请求后，取出传进来的函数名，拼接成函数执行的形式，把前端需要的数据设置在函数参数中，一块返还给前端；

3、前端在收到了服务器返回的函数执行码时，开始触发回调函数，在回调函数中就可以获取到想要的数据了；

代码如下：// 1、创建script标签

var scriptTag = document.createElement('script');

// 2、设置标签类型

scriptTag.type = 'text/javascript';

// 3、设置请求的接口

scriptTag.src = 'http://10.0.153.197:8888/news?callback=getData';

// 4、拼接标签进文档流

window.onload = function() \{

document.head.appendChild(scriptTag);

\}

// 设置回调函数

function getData (data) \{

console.log(data);

\}

JSONP的客户端具体实现：

1、我们知道，哪怕跨域js文件中的代码(当然指符合web脚本安全策略的)，web页面也是可以无条件执行的。

远程服务器remoteserver.com根目录下有个remote.js文件代码如下：alert('我是远程文件');

本地服务器localserver.com下有个jsonp.html页面代码如下：

毫无疑问，页面将会弹出一个提示窗体，显示跨域调用成功。

2、现在我们在jsonp.html页面定义一个函数，然后在远程remote.js中传入数据进行调用。

remote.js文件代码如下：localHandler(\{"result":"我是远程js带来的数据"\});

jsonp.html页面代码如下：varlocalHandler=function(data)\{

alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：'+data.result);

\};

运行之后查看结果，页面成功弹出提示窗口，显示本地函数被跨域的远程js调用成功，并且还接收到了远程js带来的数据。但是又一个问题出现了，我怎么让远程js知道它应该调用的本地函数叫什么名字呢？毕竟是jsonp的服务者都要面对很多服务对象，而这些服务对象各自的本地函数都不相同啊？我们接着往下看。

3、其实只要服务端提供的js脚本是动态生成的就行了，这样调用者可以传一个参数过去告诉服务端“我想要一段调用XXX函数的js代码，请你返回给我”，于是服务器就可以按照客户端的需求来生成js脚本并响应了。

看jsonp.html页面的代码：//得到航班信息查询结果后的回调函数varflightHandler=function(data)\{

alert('你查询的航班结果是：票价'+data.price+'元，'+'余票'+data.tickets+'张。');

\};

//提供jsonp服务的url地址(不管是什么类型的地址，最终生成的返回值都是一段javascript代码)

var url="http://flightQuery.com/jsonp/flightResult.aspx？code=CA1998&callback=flightHandler";

//创建script标签，设置其属性

var script=document.createElement('script');

script.setAttribute('src', url);

//把script标签加入head，此时调用开始

document.getElementsByTagName('head')\[0\].appendChild(script);

这次的代码变化比较大，不再直接把远程js文件写死，而是编码实现动态查询，而这也正是jsonp客户端实现的核心部分，本例中的重点也就在于如何完成jsonp调用的全过程。

我们看到调用的url中传递了一个code参数，告诉服务器我要查的是CA1998次航班的信息，而callback参数则告诉服务器，我的本地回调函数叫做flightHandler，所以请把查询结果传入这个函数中进行调用。

OK，服务器很聪明，这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html(服务端的实现这里就不演示了，与你选用的语言无关，说到底就是拼接字符串)：flightHandler(\{

"code": "CA1998",

"price": 1780,

"tickets": 5

\});

我们看到，传递给flightHandler函数的是一个json，它描述了航班的基本信息。运行一下页面，成功弹出提示窗口，jsonp的执行全过程顺利完成！

作者：天上的牛\_No1

链接：https://www.jianshu.com/p/0c5d7b1b3931

发表评论取消回复

表情：

评论列表（有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读

相关 AJAX （同源策略/ 跨域）

同源策略是浏览器的一种安全策略,所谓同源是指浏览器的url 地址中的域名,协议,端口完全相同, 只有同源的地址才可以相互通过AJAX的方式请求。不同源地址之间默认不能互相

╰+攻爆jí腚メ/ 2023年10月11日 12:57/ 0 赞/ 45 阅读

相关同源策略

同源策略浏览器同源策略：同源指协议、域名、端口皆相同使用同源策略的原因：出于安全考虑，主要时为了防止CSRF攻击【利用用户的登录专改发起恶意请求】 =>跨域主要时为了

系统管理员/ 2023年06月01日 12:52/ 0 赞/ 21 阅读

相关 ajax同源策略,JS里AJAX的使用--（同源策略，如何规避同源策略的jsonp）

同源策略：什么是同源：只有在两个页面的协议(http：//或者https：//)、域名(www.baidu.com)、端口号(80端口，默认是80)都相同的情况下，这两个页

迷南。/ 2022年09月03日 13:24/ 0 赞/ 219 阅读

相关 JSONP处理同源策略

跨域网络访问[EDIT][] 同源策略控制了不同源之间的交互，例如在使用[`XMLHttpRequest`][XMLHttpRequest] 或 [`<img>`][im

た入场券/ 2022年07月26日 00:16/ 0 赞/ 190 阅读

相关 JS-同源策略

概念:同源策略是客户端脚本（尤其是`Javascript`）的重要的安全度量标准。它最早出自`Netscape Navigator2.0`，其目的是防止某个文档或脚本从多个不同

淩亂°似流年/ 2022年07月15日 09:45/ 0 赞/ 215 阅读

相关同源策略

同源策略规定：不同域的客户端脚本在没明确授权的情况下，不能读写对方的资源。同域要求同协议同域名同端口 hhtps://www.baidu.com 和 http://w

Myth丶恋晨/ 2022年07月13日 07:18/ 0 赞/ 231 阅读

相关同源策略

1 含义一个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略。

心已赠人/ 2022年06月08日 12:44/ 0 赞/ 253 阅读

相关同源策略

所谓同源策略，指的是浏览器对不同源的脚本或者文本的访问方式进行的限制,也可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略是浏览器最核心也最

约定不等于承诺〃/ 2022年05月19日 03:28/ 0 赞/ 333 阅读

相关同源策略

一介绍同源策略是JavaScript主要的安全策略，表示一个脚本只能读取与它同源的窗口或文档的属性，这样可以防止从一个站点载入的脚本获取或设置另一站点的文档属性。例如

港控/mmm°/ 2022年05月12日 00:22/ 0 赞/ 241 阅读

相关 jsonp原理及同源策略

一.jsonp原理及同源策略 jsonp 是用来跨域读取数据的，为什么从不同的域访问数据要用jsop呢？这源于一个著名的安全策略--同源策略，即：　　协议、端口号、域名相

谁践踏了优雅/ 2021年09月15日 11:12/ 0 赞/ 350 阅读