vue中axios实现数据交互与跨域问题


Posted in Javascript onMay 12, 2019

1. 通过axios实现数据请求

vue.js默认没有提供ajax功能的。

所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互。

注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制。

下载地址:

https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js

axios提供发送请求的常用方法有两个:axios.get() 和 axios.post() 。

增 post

删 delete

改 put

查 get

// 发送get请求
 // 参数1: 必填,字符串,请求的数据接口的url地址,例如请求地址:http://www.baidu.com?id=200
 // 参数2:可选,json对象,要提供给数据接口的参数
 // 参数3:可选,json对象,请求头信息
 axios.get('服务器的资源地址',{ // http://www.baidu.com
  params:{
   参数名:'参数值', // id: 200,
  }
 }).then(function (response) { // 请求成功以后的回调函数
   console.log("请求成功");
   console.log(response);
 }).catch(function (error) { // 请求失败以后的回调函数
   console.log("请求失败");
   console.log(error.response);
 });
 // 发送post请求,参数和使用和axios.get()一样。
 // 参数1: 必填,字符串,请求的数据接口的url地址
 // 参数2:必填,json对象,要提供给数据接口的参数,如果没有参数,则必须使用{}
 // 参数3:可选,json对象,请求头信息
 axios.post('服务器的资源地址',{
  username: 'xiaoming',
  password: '123456'
 },{
  responseData:"json",
 })
 .then(function (response) { // 请求成功以后的回调函数
  console.log(response);
 })
 .catch(function (error) { // 请求失败以后的回调函数
  console.log(error);
 });
 // b'firstName=Fred&lastName=Flintstone'

1.1 json

json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据格式。

json的作用:在不同的系统平台,或不同编程语言之间传递数据。

1.1.1 json数据的语法

json数据对象类似于JavaScript中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量,不支持undefined,值还可以是数组或者json对象。

// json数据的对象格式:
{
 "name":"tom",
 "age":18
}
// json数据的数组格式:
["tom",18,"programmer"]

复杂的json格式数据可以包含对象和数组的写法。

{
 "name":"小明",
 "age":200,
 "fav":["code","eat","swim","read"],
 "son":{
 "name":"小小明",
 "age":100,
 "lve":["code","eat"],
 }
}

// 数组结构也可以作为json传输数据。

json数据可以保存在.json文件中,一般里面就只有一个json对象。

总结:

1. json文件的后缀是.json
2. json文件一般保存一个单一的json数据
3. json数据的属性不能是方法或者undefined,属性值只能:数值、字符串、json和数组
4. json数据只使用双引号、每一个属性成员之间使用逗号隔开,并且最后一个成员没有逗号。   

{
  "name":"小明",
  "age":200,
  "fav":["code","eat","swim","read"],
  "son":{
  "name":"小小明",
  "age":100
  }
 }

工具:postman可以用于测试开发的数据接口。

1.1.2 js中提供的json数据转换方法

javascript提供了一个JSON对象来操作json数据的数据转换.

方法 参数 返回值 描述
stringify json对象 字符串 json对象转成字符串
parse 字符串 json对象 字符串格式的json数据转成json对象
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<script>
 // json语法
 let humen = {
  "username":"xiaohui",
  "password":"1234567",
  "age":20
 };
 console.log(humen);
 console.log(typeof humen);
 // JSON对象提供对json格式数据的转换功能
 // stringify(json对象) # 用于把json转换成字符串
 let result = JSON.stringify(humen);
 console.log(result);
 console.log(typeof result);
 // parse(字符串类型的json数据) # 用于把字符串转成json对象
 let json_str = '{"password":"1123","age":20,"name":"xiaobai"}';
 console.log(json_str)
 console.log(typeof json_str)
 let json_obj = JSON.parse(json_str);
 console.log(json_obj);
 console.log(typeof json_obj)
 console.log(json_obj.age)
</script>
</body>
</html>

1.2 ajax

ajax,一般中文称之为:"阿贾克斯",是英文 “Async Javascript And Xml”的简写,译作:异步js和xml数据传输数据。

ajax的作用: ajax可以让js代替浏览器向后端程序发送http请求,与后端通信,在用户不知道的情况下操作数据和信息,从而实现页面局部刷新数据/无刷新更新数据。

所以开发中ajax是很常用的技术,主要用于操作后端提供的数据接口,从而实现网站的前后端分离。

ajax技术的原理是实例化js的XMLHttpRequest对象,使用此对象提供的内置方法就可以与后端进行数据通信。

1.2.1 数据接口

数据接口,也叫api接口,表示后端提供操作数据/功能的url地址给客户端使用。

客户端通过发起请求向服务端提供的url地址申请操作数据【操作一般:增删查改】

同时在工作中,大部分数据接口都不是手写,而是通过函数库/框架来生成。

1.2.3 ajax的使用

ajax的使用必须与服务端程序配合使用,但是目前我们先学习ajax的使用,所以暂时先不涉及到服务端python代码的编写。因此,我们可以使用别人写好的数据接口进行调用。

jQuery将ajax封装成了一个函数$.ajax(),我们可以直接用这个函数来执行ajax请求。

接口 地址
天气接口 http://wthrcdn.etouch.cn/weather_mini?city=城市名称
音乐接口搜索 http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=歌曲标题
音乐信息接口 http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.play&songid=音乐ID

编写代码获取接口提供的数据:

jQ版本

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.12.4.js"></script>
 <script>
 $(function(){
  $("#btn").on("click",function(){
   $.ajax({
    // 后端程序的url地址
    url: 'http://wthrcdn.etouch.cn/weather_mini',
    // 也可以使用method,提交数据的方式,默认是'GET',常用的还有'POST'
    type: 'get', 
    dataType: 'json', // 返回的数据格式,常用的有是'json','html',"jsonp"
    data:{ // 设置发送给服务器的数据,如果是get请求,也可以写在url地址的?后面
     "city":'北京'
    }
   })
   .done(function(resp) {  // 请求成功以后的操作
    console.log(resp);
   })
   .fail(function(error) { // 请求失败以后的操作
    console.log(error);
   });
  });
 })
 </script>
</head>
<body>
<button id="btn">点击获取数据</button>
</body>
</html>

vue版本:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/vue.js"></script>
 <script src="js/axios.js"></script>
</head>
<body>
 <div id="app">
  <input type="text" v-model="city">
  <button @click="get_weather">点击获取天气</button>
 </div>
 <script>
  let vm = new Vue({
   el:"#app",
   data:{
    city:"",
   },
   methods:{
    get_weather(){
     // http://wthrcdn.etouch.cn/weather_mini?city=城市名称
     axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
      .then(response=>{
       console.log(response);

      }).catch(error=>{
       console.log(error.response)
     });
    }
   }
  })
 </script>
</body>
</html>

总结:

1. 发送ajax请求,要通过$.ajax(),参数是对象,里面有固定的参数名称。

$.ajax({
  "url":"数据接口url地址",
  "method":"http请求方式,前端只支持get和post",
  "dataType":"设置服务器返回的数据格式,常用的json,html,jsonp,默认值就是json",
  // 要发送给后端的数据参数,post时,数据必须写在data,get可以写在data,也可以跟在地址栏?号后面
  "data":{
  "数据名称":"数据值",
  }
 }).then(function(resp){ // ajax请求数据成功时会自动调用then方法的匿名函数
  console.log( resp ); // 服务端返回的数据
 }).fail(function(error){ // ajax请求数据失败时会自动调用fail方法的匿名函数
  console.log( error );
 });

2. ajax的使用往往配合事件/钩子操作进行调用。

jQuery还提供了$.get 和 $post简写$.ajax的操作。

// 发送get请求
// 参数1:数据接口的请求地址
// 参数2:发送给接口地址的数据参数
// 参数3:ajax请求成功以后,调用的匿名函数,匿名函数的第一个参数还是服务端返回的数据
// 参数4:设置服务端返回的数据格式,告诉给jQuery
$.get("test.php", { "func": "getNameAndTime" },
 function(data){
  alert(data.name); // John
  console.log(data.time); // 2pm
 }, "json");
// 发送post请求
// 参数1:数据接口的请求地址
// 参数2:发送给接口地址的数据参数
// 参数3:ajax请求成功以后,调用的匿名函数,匿名函数的第一个参数还是服务端返回的数据
// 参数4:设置服务端返回的数据格式,告诉给jQuery
$.post("test.php", { "func": "getNameAndTime" },
 function(data){
  alert(data.name); // John
  console.log(data.time); // 2pm
 }, "json");

1.2.4 同源策略

同源策略,是浏览器为了保护用户信息安全的一种安全机制。所谓的同源就是指代通信的两个地址(例如服务端接口地址与浏览器客户端页面地址)之间比较,是否协议、域名(IP)和端口相同。不同源的客户端脚本[javascript]在没有明确授权的情况下,没有权限读写对方信息。

ajax本质上还是javascript,是运行在浏览器中的脚本语言,所以会被受到浏览器的同源策略所限制。

前端地址:http://www.oldboy.cn/index.html 是否同源 原因
http://www.oldboy.cn/user/login.html 协议、域名、端口相同
http://www.oldboy.cn/about.html 协议、域名、端口相同
https://www.oldboy.cn/user/login.html 协议不同 ( https和http )
http:/www.oldboy.cn:5000/user/login.html 端口 不同( 5000和80)
http://bbs.oldboy.cn/user/login.html 域名不同 ( bbs和www )

同源策略针对ajax的拦截,代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/vue.js"></script>
 <script src="js/axios.js"></script>
</head>
<body>
 <div id="app">
  <button @click="get_music">点击获取天气</button>
 </div>
 <script>
  let vm = new Vue({
   el:"#app",
   data:{},
   methods:{
    get_music(){
     axios.get("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=我的中国心")
      .then(response=>{
       console.log(response);
      }).catch(error=>{
       console.log(error.response)
     });
    }
   }
  })
 </script>
</body>
</html>

上面代码运行错误如下:

Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=%E6%88%91%E7%9A%84%E4%B8%AD%E5%9B%BD%E5%BF%83' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

上面错误,关键词:Access-Control-Allow-Origin

只要出现这个关键词,就是访问受限。出现同源策略的拦截问题。

1.2.5 ajax跨域(跨源)方案之CORS

​ CORS是一个W3C标准,全称是"跨域资源共享",它允许浏览器向跨源的后端服务器发出ajax请求,从而克服了AJAX只能同源使用的限制。

​ 实现CORS主要依靠后端服务器中响应数据中设置响应头信息返回的。

django的视图

def post(request):
​ response = new Response()
​ response .set_header("Access-Control-Allow-Origin","*")
​ return response;
// 在响应行信息里面设置以下内容:
Access-Control-Allow-Origin: ajax所在的域名地址
Access-Control-Allow-Origin: www.oldboy.cn # 表示只允许www.oldboy.cn域名的客户端的ajax跨域访问
// * 表示任意源,表示允许任意源下的客户端的ajax都可以访问当前服务端信息
Access-Control-Allow-Origin: *

vue中axios实现数据交互与跨域问题

总结:

0. 同源策略:浏览器的一种保护用户数据的一种安全机制。
   浏览器会限制脚本语法不能跨源访问其他源的数据地址。
   同源:判断两个通信的地址之间,是否协议,域名[IP],端口一致。   

   ajax:  http://127.0.0.1/index.html
   api数据接口:  http://localhost/index   

   这两个是同源么?不是同源的。是否同源的判断依据不会根据电脑来判断,而是通过协议、域名、端口的字符串是否来判断。 

1. ajax默认情况下会受到同源策略的影响,一旦受到影响会报错误如下:
     No 'Access-Control-Allow-Origin' header is present on the requested resource

2. 解决ajax只能同源访问数据接口的方式:

   1. 在服务端的响应行中设置:

      Access-Control-Allow-Origin: 允许访问的域名地址

   2. jsonp

   3. 是否服务端代理

      思路:通过python来请求对应的服务器接口,获取到数据以后,

总结

以上所述是小编给大家介绍的vue中axios实现数据交互与跨域问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
javascript实现日历效果
Jun 17 Javascript
使用原生javascript开发计算器实例代码
Feb 21 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 #jQuery
JS块级作用域和私有变量实例分析
May 11 #Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 #Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 #Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 #jQuery
JS实现获取当前所在周的周六、周日示例分析
May 11 #Javascript
js核心基础之构造函数constructor用法实例分析
May 11 #Javascript
You might like
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
拖动时防止选中
2017/02/03 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
详解vue 组件注册
2020/11/20 Vue.js
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
浅谈python可视化包Bokeh
2018/02/07 Python
python距离测量的方法
2018/03/06 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
这段代码难道不该打印出56吗
2013/02/27 面试题
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
电话客服工作职责
2014/07/27 职场文书
监考失职检讨书
2015/01/26 职场文书
长城的导游词
2015/01/30 职场文书
2015年暑假生活总结
2015/07/13 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
Python必备技巧之字符数据操作详解
2022/03/23 Python
Redis 异步机制
2022/05/15 Redis