其他分享
首页 > 其他分享> > VUE使用jsonp的形式发送跨域请求

VUE使用jsonp的形式发送跨域请求

作者:互联网

</!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="./lib/vue-2.4.0.js"></script>
    <!-- <script src="./lib/axios.min.js"></script> -->
    <script src="./lib/vue-resource-1.3.4.js"></script>
    <style>
        
    </style>
</head>
<body>
    <!-- 
        同源:同源是指一般情况下,浏览器发出请求访问的资源都是在相同的协议、域名、端口下的,这样的请求即为默认同源策略的访问。
        由于浏览器的同源策略,凡是发送请求的url的协议、域名、端口号三者之间任意一个(或者多个)与当前页面地址不同即为跨域。
        在实际项目开发中,使用的当前页面有可能会发出这样的请求,访问的是非同源的资源,那么我们就需要进行跨域处理。
        例子:
        协议:http
        ip地址:192.168.1.1
        端口:8080
        当前页面:
        http:198.162.1.1:8080/xxx/xxx.jsp
        发出请求:同源
        http:192.168.1.1:8080/xxx/yyy.do
        发出请求:跨域
        https:192.168.1.1:8080/xxx/yyy.do  协议不同
        http:192.168.1.2:8080/xxx/yyy.do  ip不同(域名不同)
        http:192.168.1.1:8088/xxx/yyy.do  端口不同
    -->
    <!-- 
        处理跨域的常用处理方式
        1.代理方式
        代理用于将请求发送给后天服务器,通过服务器来发送请求,然后将请求的结果传递给前端。通过nginx代理来实现操作
            优点:跨域服务稳定
            缺点:在使用到跨域处理的时候,必须要事先搭建nginx服务的代理环境,比较麻烦
        2.COORS方式
        CORS是w3c标准的方式,通过在web服务器端的设置
        响应头AccessControl-Alow-Origin来指定哪些域可以访问本域的数据
            优点:使用简单,支持基于http协议的所有请求方式
            缺点:跨域请求响应稍慢
        3.jsonp方式
        通过动态插入一个script标签。浏览器对script的资源引用美哟同源限制,同时资源加载到页面后会立即执行
            优点:使用简单。跨域服务响应快,获取的数据是我们最常见的json格式的数据。
            缺点:只能发送get请求,无法发送post请求

        由于在开发中发出跨域请求的目的通常是为了取得指定的资源数据。所以一般都是发送get请求,由于jsonp的形式使用简单,而且关于接收的响应数据,是程序员使用最多的json格式的数据,所以该形式在企业中应用的比较广泛

        对于资源的访问
        对于分布式服务的访问
     -->
    <div id="app">
        <button @click="getStudent">点击获取学生信息</button>
        <br>
        <br>
        编号:<span>{{id}}</span>
        <br>
        姓名:<span>{{name}}</span>
        <br>
        年龄:<span>{{age}}</span>
        
    </div>


    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                
            },
            methods:{
                /**
                 * 当前项目所在服务器
                 * 协议:http
                 * ip:localhost
                 * 端口号:8080
                 *
                 * 将请求发送到以下配置的服务器,来从跨域的服务器接收数据
                 * 协议:http
                 * ip:localhost
                 * 端口号:8088
                 */
            //如果想要处理跨域请求,必须要使用vue-resource的方式发送请求
                getStudent(){
                    //使用jsonp的形式发送跨域请求
                     this.$http.jsonp("http://localhost:8088/ky01/getKyStudentDta.do").then(result=>{
                        result=result.body;
                        this.id=result.id;
                        this.name=result.name;
                        this.age=result.age;
                     });
                }
            }    
        })
    </script>
</body>
</html>

 

标签:VUE,http,跨域,result,jsonp,id,localhost
来源: https://www.cnblogs.com/gfl-1112/p/16539367.html