资讯专栏INFORMATION COLUMN

JSONP跨域

CoderBear / 1560人阅读

摘要:实现跨域访问数据是的一种使用模式由于同源策略,一般来说位于的网页无法与不是的服务器沟通,而的元素是一个例外。服务器收到这个请求以后,会将数据放在回调函数的参数位置返回。这时只要浏览器定义了对应的回调函数,该函数就会立即被调用。

JSONP的使用 1.浏览器的同源策略

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

2.一个源的定义

如果两个页面的协议,端口和域名都相同,则两个页面具有相同的源,这就是同源。
http://www.example.com/dir/page.html这个网址,协议是http://,域名是www.example.com,端口是80(默认端口可以省略)。它的同源情况如下。

http://www.example.com/dir2/other.html:同源

http://example.com/dir/other.html:不同源(域名不同)

http://v2.www.example.com/dir/other.html:不同源(域名不同)

http://www.example.com:81/dir/other.html:不同源(端口不同)

参考文章

https://developer.mozilla.org...

http://www.ruanyifeng.com/blo...

---
同源政策规定,AJAX请求只能发给同源的网址,否则就报错。

3.JSONP实现跨域访问数据

JSONP(JSON with Padding)是JSON的一种“使用模式”
由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML

上面的代码通过动态创建添加script元素,向服务器发送请求,查询字符串必须有callback参数,用来指定回调函数的名字。

response.write(`${query.callback}.call(undefined,"success")`)

服务器收到这个请求以后,会将数据放在回调函数的参数位置返回。这时只要浏览器定义了对应的回调函数,该函数就会立即被调用。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94275.html

相关文章

  • jsonp 跨域原理分析

    摘要:为请求指定一个回调函数名。这主要用来让生成一个独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。在回调函数中,通常我们只需通过判断请求是否完成,如果已完成,再根据判断是否是一个成功的响应。 本篇文章借鉴自 博客园文章 原文地址 AJAX即Asynchronous Javascript And XML(异步JavaScript和XML),是指一种创建交互式网页应用的...

    scq000 评论0 收藏0
  • JSONP跨域访问API接口深入理解

    摘要:说明关于跨域问题的解决方案多达七八种,你不要说哪有这么多,我不跟你较真哈,你也别跟我较真哈自行百度或这里不会跟你说那么多种只说使用最多的一种你要非说用的不是最多的我不信哦你信好了哈哈你开心就好关于跨域浏览器的同源策略要了解什么是跨域你需要了 说明 关于跨域问题的解决方案多达七、八种,你不要说哪有这么多,我不跟你较真哈,你也别跟我较真哈, ?!自行 百度 或 Google, 这里不会跟你...

    tunny 评论0 收藏0
  • jsonp跨域资源引起CORB

    摘要:三原因分析浏览器在加载可以跨域资源时,在将资源载入页面时对其进行识别与拦截等一系列处理。从而禁用了客户端浏览器的类型嗅探行为即把不可执行的类型转变为可执行的类型。 一、jsonp的使用 jsonp是实现跨域请求数据的一种方式,解决了由于浏览器同源策略带来的安全限制;虽然浏览器有同源策略的限制,但对于一些特殊的dom元素却可引用非同源资源,例如 等,下面结合例子说明: jquery直接发...

    wuyangnju 评论0 收藏0
  • jsonp跨域获取数据实现百度搜索

    摘要:同源策略做了很严格的限制,但是在实际的场景中,又确实有很多地方需要突破同源策略的限制,也就是我们常说的跨域。使用跨域由于同源策略,一般来说位于的网页无法与不是的服务器沟通,而的元素是一个例外。 本菜鸡最近在写某个页面请求数据时,报了如下的错误。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...

    Tikitoo 评论0 收藏0
  • jsonp跨域获取数据实现百度搜索

    摘要:同源策略做了很严格的限制,但是在实际的场景中,又确实有很多地方需要突破同源策略的限制,也就是我们常说的跨域。使用跨域由于同源策略,一般来说位于的网页无法与不是的服务器沟通,而的元素是一个例外。 本菜鸡最近在写某个页面请求数据时,报了如下的错误。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...

    gggggggbong 评论0 收藏0
  • jsonp跨域获取数据实现百度搜索

    摘要:同源策略做了很严格的限制,但是在实际的场景中,又确实有很多地方需要突破同源策略的限制,也就是我们常说的跨域。使用跨域由于同源策略,一般来说位于的网页无法与不是的服务器沟通,而的元素是一个例外。 本菜鸡最近在写某个页面请求数据时,报了如下的错误。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...

    lemanli 评论0 收藏0

发表评论

0条评论

CoderBear

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<