最近在项目中需要用到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. Flask使用Flask-SQLAlchemy操作MySQL数据库

    前言: Flask-SQLAlchemy是一个Flask扩展,简化了在Flask程序中使用SQLAlchemy的操作.SQLAlchemy是一个很强大的关系型数据库框架,支持多种数据库后台.SQLAl ...

  2. 第八次Scrum meeting

    第八次Scrum  meeting 任务及完成度: 成员 12.29 12.30 陈谋 任务1040:完成stackoverflow的数据处理后的json处理(99%) 任务1114-1:完成对网页数 ...

  3. [BUAA软工]第二次博客作业---结对编程

    [BUAA软工]结对作业 项目 内容 这个作业属于哪个课程 北航软工 这个作业的要求在哪里 2019年软件工程基础-结对项目作业 我在这个课程的目标是 学习如何以团队的形式开发软件,提升个人软件开发能 ...

  4. QT 子窗口退出全屏

    m_pWidget代表子窗口, 子窗口显示全屏: m_pWidget->setWindowFlags(Qt::Dialog); m_pWidget->showFullScreen(); 子 ...

  5. Spring使用Cache、整合Ehcache(转)

    今天在做Spring使用Cache.整合Ehcache时发现一篇非常好的文章,原文地址 http://elim.iteye.com/blog/2123030 从3.1开始,Spring引入了对Cach ...

  6. shell脚本--分支、条件判断

    在看选择判断结构之前,请务必先看一下数值比较与文件测试 if....else... #!/bin/bash #文件名:test.sh score=66 # //格式一 if [ $score -lt ...

  7. slf4j的java包冲突问题

  8. ExtJS Tab里放Grid高度自适应问题,官方Perfect方案。

    出处:http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/layout-browser/layouts/combination.js // ...

  9. 转载 loadrunner的一些问题解决

    sckOutOfMemory 7 内存不足  sckInvalidPropertyValue 380 属性值不效  sckGetNotSupported 394 属性不可读  sckGetNotSup ...

  10. [kali] 安装完kali之后允许远程ssh

    1. 安装kali 2.控制台登录kali 3. 修改 /etc/ssh/sshd_config 4.将 permitrootlogin 前面的注释去掉,并且后面改为yes 5.然后重启ssd服务 / ...