zoukankan      html  css  js  c++  java
  • 利用jsonp实现跨域请求

      同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。

      由于同源策略,我们在使用ajax请求资源时不能跨域请求,也就是说必须是同一个域名,协议,端口。但我们在开发的时候经常会需要请求到其他服务器(跨域)的数据,其中一种方法就是jsonp。

      另外提一下,一般都是使用json这种数据格式来传递数据,因为javascript原生支持json格式,所以使用起来很方便。不要把json和jsonp混淆了,他们根本不是一个次元的东西!!!比如说两个中国人进行对话,json就是汉语(具体内容),而jsonp就是两个人交流的方式(用嘴)。

    什么是jsonp? 

      我们都知道script标签是可以跨域请求的,例如我们引入jquery.js的时候经常使用cdn上的资源,并没有把jquery.js这个文件真正地下载到自己的服务器上。那么利用script可以跨域请求的特性,我们就能请求其他服务器的资源。这种技术也就是所谓的jsonp。多说无益,下面是一个简单的实例,看了之后相信你就能对jsonp的原理有了理解。  

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
    
    <script>
        var demo1 = function (data) {
            alert("我是后台通过jsonp传来的数据:" + data.name);
        }
    </script>
    <script src="http://远程服务器域名或ip地址/jsonp/jsonp.js"></script>  <!--这里为了保护我的服务器不受攻击,就不放出我的服务器地址啦,哈哈哈-->
    </body>
    </html>

      

    请求的服务器下面有对应的jsonp.js(名字自己起,不一定是jsonp.js)这个文件,里面的代码如下:

    demo1({"name": "lin"}); /*在远程服务器上的js代码,也就是说该服务器上的数据我们都可以传入函数,那么html执行的时候也就获取到了这些远程数据*/

       

      html文件渲染如下,可见远程服务器的数据已经被请求过来:

      

      

      工作流程解析:我们先在html定义了demo1这个函数,然后引入远程jsonp.js文件,该js文件执行html定义的demo1函数(执行时传入的参数就是想要传递的数据)。这样html也就变相的获取到了远程服务器的数据。

       

       总结:script标签也就是一个简单的get请求,服务器处理该get请求,返回一个函数,传入该函数的参数也就是客户端希望获得的数据。其实不只是script可以跨域请求,只要有src属性的标签都可以借助同样的原理进行跨域请求,例如img, iframe

      

  • 相关阅读:
    std thread
    windows更新包发布地址
    How to set up logging level for Spark application in IntelliJ IDEA?
    spark 错误 How to set heap size in spark within the Eclipse environment?
    hadoop 常用命令
    windows 安装hadoop 3.2.1
    windows JAVA_HOME 路径有空格,执行软连接
    day01MyBatisPlus条件构造器(04)
    day01MyBatisPlus的CRUD 接口(03)
    day01MyBatisPlus入门(02)
  • 原文地址:https://www.cnblogs.com/yonglin/p/7101147.html
Copyright © 2011-2022 走看看