在Vue中如何使用axios跨域访问数据(转)
最近在项目中需要用到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跨域访问数据(转)的更多相关文章
- 在Vue中如何使用axios跨域访问数据
最近在项目中需要用到axios,所以就恶补一下这个axios到底是什么东东.越来它是vue-resource的替代品,官网也说了,以后都用axios, vue-resource不在维护.那么这个axi ...
- Vue用axios跨域访问数据
Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- react axios 跨域访问一个或多个域名
1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: "proxy":"http://iot-demo ...
- 设置IE浏览器跨域访问数据
在开发中,经常会遇到多站点跨域访问后台服务获取数据的情况,解决方法有两种 自己写代理服务,访问代理服务,代理服务请求服务获取数据再返回: 设置浏览器可以跨域访问数据. 本文来讲如何设置IE浏览器跨域访 ...
- axios跨域访问eggjs的坑egg-cors egg-passport passport-local session传递问题
在同一机器上写前端和后端,前端使用webpack-dev-server启动,后端直接在eggjs项目目录下使用npm run dev启动,这种情况下,前端访问后端就是跨域访问.eggjs提供了一个跨域 ...
- 在dotnet core web api中支持CORS(跨域访问)
最近在写的Office add-in开发系列中,其中有一个比较共性的问题就是在add-in的客户端脚本中访问远程服务时,要特别注意跨域访问的问题. 关于CORS的一些基本知识,请参考维基百科的说明:h ...
- 在ABP的Web层中实现复杂请求跨域访问
在最近的项目中,后端使用ABP,前端采用React,前后端完全分离.其中大部分接口都通过WebApi层调用,项目中未使用Session.但最后在添加一个网站的验证码验证留言功能时,使用了Session ...
- Vue之通过代理设置跨域访问
我们使用脚手架创建的项目,可以在config项目中看到
随机推荐
- Flask使用Flask-SQLAlchemy操作MySQL数据库
前言: Flask-SQLAlchemy是一个Flask扩展,简化了在Flask程序中使用SQLAlchemy的操作.SQLAlchemy是一个很强大的关系型数据库框架,支持多种数据库后台.SQLAl ...
- 第八次Scrum meeting
第八次Scrum meeting 任务及完成度: 成员 12.29 12.30 陈谋 任务1040:完成stackoverflow的数据处理后的json处理(99%) 任务1114-1:完成对网页数 ...
- [BUAA软工]第二次博客作业---结对编程
[BUAA软工]结对作业 项目 内容 这个作业属于哪个课程 北航软工 这个作业的要求在哪里 2019年软件工程基础-结对项目作业 我在这个课程的目标是 学习如何以团队的形式开发软件,提升个人软件开发能 ...
- QT 子窗口退出全屏
m_pWidget代表子窗口, 子窗口显示全屏: m_pWidget->setWindowFlags(Qt::Dialog); m_pWidget->showFullScreen(); 子 ...
- Spring使用Cache、整合Ehcache(转)
今天在做Spring使用Cache.整合Ehcache时发现一篇非常好的文章,原文地址 http://elim.iteye.com/blog/2123030 从3.1开始,Spring引入了对Cach ...
- shell脚本--分支、条件判断
在看选择判断结构之前,请务必先看一下数值比较与文件测试 if....else... #!/bin/bash #文件名:test.sh score=66 # //格式一 if [ $score -lt ...
- slf4j的java包冲突问题
- ExtJS Tab里放Grid高度自适应问题,官方Perfect方案。
出处:http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/layout-browser/layouts/combination.js // ...
- 转载 loadrunner的一些问题解决
sckOutOfMemory 7 内存不足 sckInvalidPropertyValue 380 属性值不效 sckGetNotSupported 394 属性不可读 sckGetNotSup ...
- [kali] 安装完kali之后允许远程ssh
1. 安装kali 2.控制台登录kali 3. 修改 /etc/ssh/sshd_config 4.将 permitrootlogin 前面的注释去掉,并且后面改为yes 5.然后重启ssd服务 / ...