JSONP跨域

原创 2018年04月15日 22:39:39

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/zh-CN/docs/Web/Security/Same-origin_policy
- http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html


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


JSONP实现跨域访问数据

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

ajax请求受同源策略影响,不允许进行跨域请求

而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。

JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小。

JSONP的基本思想是,动态创建一个<script>元素,script元素发送请求不熟同源政策的限制,只能发送get请求。服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

<script>//SRL server rendered javascript
        button.addEventListener('click', (e) => {
            //动态创建script
            var script = document.createElement('script')
            let functionName='blog1'+parseInt(Math.random()*100000,10)

            //callback
            window[functionName]=function(result){
                if(result==='success'){
                    amount.innerText=amount.innerText-1
                }else{} 
            }
            //发送请求
            script.src = 'http://feile.com/pay?callback='+functionName
            document.body.appendChild(script)

            script.onload = function (e) {
                // debugger
                e.currentTarget.remove()
                delete window[functionName]
            }
            script.onerror = function (e) {
                alert('fail')
                e.currentTarget.remove()
                delete window[functionName]
            }
        })
    </script>

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

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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hqf2018/article/details/79954579

C++中的文件输入/输出(5):二进制文件的处理

C++中的文件输入/输出(5)原作:Ilia Yordanov,  loobian@cpp-home.com 二进制文件的处理 虽然有规则格式(formatted)的文本(到目前为止我所讨论的所有文件...
  • Kusk
  • Kusk
  • 2003-08-24 15:33:00
  • 8230

跨域解决方案JSONP

什么是跨域老生常谈的问题了。下面列出一个表格: URL 说明 是否跨域 http://www.a.com/a.js http://www.a.com/b.js 同一个域名 否 ...
  • jlin991
  • jlin991
  • 2017-02-24 17:27:51
  • 301

轻松搞定JSONP跨域请求

本文介绍了通过JSONP实现跨域请求,首先介绍了“同源策略”,然后介绍了同构JavaScript动态加载script标签的方法,实现JSONP跨域,最后介绍了jQuery中对JSONP的封装和使用...
  • u014607184
  • u014607184
  • 2016-07-26 17:49:49
  • 43316

jsonp解决跨域请求以及其工作原理

jsonp解决跨域请求以及其工作原理    一.跨域问题 JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same-Or...
  • lululove19870526
  • lululove19870526
  • 2016-09-19 21:29:50
  • 3107

跨域JSONP原理及调用具体示例

上篇博客介绍了同源策略和跨域访问概念,其中提到跨域常用的基本方式:JSONP和CORS。   那这篇博客就介绍JSONP方式。   JSONP原理   在同源策略下,在某个服务器下的页面是无法获...
  • llhhyy1989
  • llhhyy1989
  • 2014-06-20 12:30:43
  • 9664

解决跨域的jsonp+Java实例

Jsonp跨域是通过动态创建script标签来实现跨域的,script标签的src属性是没有跨域的限制的,jsonp请求相当于将我们的请求通过script标签的src发送出去,后台返回的数据是call...
  • buler_sky
  • buler_sky
  • 2017-04-19 15:38:37
  • 1723

jQuery和java后台的jsonp跨域问题

Jsonp原理:  ajax本身是不可以跨域的,通过产生一个script标签来实现跨域。...
  • sunpeng_sp
  • sunpeng_sp
  • 2016-10-26 15:24:21
  • 3713

用JSONP实现跨域请求

Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和...
  • taoerchun
  • taoerchun
  • 2016-05-10 17:13:50
  • 2061

同源、跨域、jsonp(面试常问)

提到跨域,就不得不说一下同源策略,同源策略是浏览器的一种安全策略,也就说a网站不能随便读取b网站的内容,试想一下,如果网站之间都可以随便读取互相的文件,比如一个黑客程序,他利用IFrame把真正的银行...
  • qq_33562825
  • qq_33562825
  • 2017-03-07 15:29:09
  • 799

js和jquery使用jsonp解决跨域

跨域跨域 理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。 何谓同源: URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示...
  • csdn_yudong
  • csdn_yudong
  • 2017-01-11 18:52:11
  • 1316
收藏助手
不良信息举报
您举报文章:JSONP跨域
举报原因:
原因补充:

(最多只允许输入30个字)