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