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

2022-08-01 11:04:46 阅读：151 来源： 互联网

标签：VUE http 跨域 result jsonp id localhost

</!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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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