最近在项目中需要用到axios,所以就恶补一下这个axios到底是什么东东。越来它是vue-resource的替代品,官网也说了,以后都用axios,

vue-resource不在维护。那么这个axios怎么用呢,上网搜索了一大堆,基本上都是雷同,我也不知道那些作者有没有在本地测试过。至少我按照网上的做法,总不能成功。经过几天的奋斗,我终于把它搞清楚了,为了不让其他的小伙伴们走弯路,我把我在实际操作中的例子分享给大家,希望对大家有用。

一、安装axios

老规矩,要想使用axios,我们得安装它,安装方式:npm install axios

二、客户端使用方式

先来看看网上的答案,如图所示,我已经在图上标识过了,这种做法是错误的。

 

正确的做法是去掉post,如图所示:

 

 

三、服务器端设置

虽然客户端跨域设置好了,但是你还是不能访问接口数据,必须在服务器端设置header属性,如图所示:

 

四、axios方法封装

一般情况下,我们会用到的方法有:GET,POST,PUT,PATCH,封装方法如下:

 

 

五、封装后的方法的使用

1、在main.js文件里引用之前写好的文件,我的命名为http.js

 

2、在需要的地方之间调用,如图所示:

 

说明:

GET调用方法如下,其中url是接口地址

this.$get(url).then((res) {

//代码

});

POST调用方法如下,其中url是接口地址,data是请求的数据。

this.$post(url,data).then({

//代码

});

PATCH调用方法如下,其中url是接口地址,data是请求的数据

this.$patch(url,data).then({

//代码

});

PUT调用方法如下,其中url是接口地址,data是请求的数据

this.$put(url,data).then({

//代码

});

看了以上内容,是不是很简单,其实也没啥的,但是就是这个问题卡了我好久,在看看网上的答案,真的是不堪一击。问题解决了,内心真的好激动啊  O(∩_∩)O哈!

作者:陈楠酒肆
链接:http://www.jianshu.com/p/3b5e453f54f5
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

在Vue中如何使用axios跨域访问数据(转)的更多相关文章

  1. 在Vue中如何使用axios跨域访问数据

    最近在项目中需要用到axios,所以就恶补一下这个axios到底是什么东东.越来它是vue-resource的替代品,官网也说了,以后都用axios, vue-resource不在维护.那么这个axi ...

  2. Vue用axios跨域访问数据

    Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...

  3. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

  4. react axios 跨域访问一个或多个域名

    1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: "proxy":"http://iot-demo ...

  5. 设置IE浏览器跨域访问数据

    在开发中,经常会遇到多站点跨域访问后台服务获取数据的情况,解决方法有两种 自己写代理服务,访问代理服务,代理服务请求服务获取数据再返回: 设置浏览器可以跨域访问数据. 本文来讲如何设置IE浏览器跨域访 ...

  6. axios跨域访问eggjs的坑egg-cors egg-passport passport-local session传递问题

    在同一机器上写前端和后端,前端使用webpack-dev-server启动,后端直接在eggjs项目目录下使用npm run dev启动,这种情况下,前端访问后端就是跨域访问.eggjs提供了一个跨域 ...

  7. 在dotnet core web api中支持CORS(跨域访问)

    最近在写的Office add-in开发系列中,其中有一个比较共性的问题就是在add-in的客户端脚本中访问远程服务时,要特别注意跨域访问的问题. 关于CORS的一些基本知识,请参考维基百科的说明:h ...

  8. 在ABP的Web层中实现复杂请求跨域访问

    在最近的项目中,后端使用ABP,前端采用React,前后端完全分离.其中大部分接口都通过WebApi层调用,项目中未使用Session.但最后在添加一个网站的验证码验证留言功能时,使用了Session ...

  9. Vue之通过代理设置跨域访问

    我们使用脚手架创建的项目,可以在config项目中看到

随机推荐

  1. Daily Scrumming* 2015.12.21(Day 13)

    一.团队scrum meeting照片 大部分成员编译请假,故今天没有开scrum meeting 二.成员工作总结 姓名 任务ID 迁入记录 江昊 无 无 任务说明: 今日准备编译测验,请假 遇到问 ...

  2. 从Silverlight到ExtJS再到BootStrap,DataTable(DataGrid)的样式格式化原理没变

    <table id="tableOrder" data-toolbar="tableBtnGroup" data-row-style="rowS ...

  3. 深度学习中 --- 解决过拟合问题(dropout, batchnormalization)

    过拟合,在Tom M.Mitchell的<Machine Learning>中是如何定义的:给定一个假设空间H,一个假设h属于H,如果存在其他的假设h’属于H,使得在训练样例上h的错误率比 ...

  4. Linux初学笔记---关于进程管理等

    菜鸟初学: 1. 查看进程用的命令: ps 具体用法 ps -A ro ps -e 显示所有进程 ps -u root 显示root 用户的进程 ps -u root -N 显示非root用户的进程 ...

  5. 转帖 Oracle 主键的处理方法 http://www.cnblogs.com/Richardzhu/p/3470929.html

    Oracle之主键的创建.添加.删除操作   一.创建表的同时创建主键约束 1.1.无命名 SQL> create table jack (id int primary key not null ...

  6. 转发--UIPATH http://baijiahao.baidu.com/s?id=1596656405106773890&wfr=spider&for=pc&qq-pf-to=pcqq.c2c

    之前和朋友聊起RPA,他们第一反应就是哎哟,主流几家vendor太贵了. 我们公司业务量没有那么大,用不上啦~ 尤其Blue Prism和 Automation anywhere报价,一般规模的企业一 ...

  7. [转帖]召冠总的 SQLSERVER常用的性能诊断语句. --保存学习备查

    CopyFrom https://www.cnblogs.com/zhaoguan_wang /*常规服务器动态管理对象包括:dm_db_*:数据库和数据库对象dm_exec_*:执行用户代码和关联的 ...

  8. Angular $interval

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  9. 剑指offer:滑动窗口的最大值

    滑动窗口的最大值 题目描述 给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值 ...

  10. 前端存储loaclForage

    以前使用本地存储,首先会想到localstorage或者session storage,将要存储的数据转化成字符串后进行setItem操作,但是使用local storage 有几个问题: 1.它是同 ...