</!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使用jsonp的形式发送跨域请求
最新推荐文章于 2024-08-20 09:05:48 发布