在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
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

时间: 2024-07-30 00:05:36

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

使用vue-cli+axios配置代理进行跨域访问数据

1.首先在本地全局安装 vue-cli vue-cli网址:https://github.com/vuejs/vue-cli 先在控制台安装 全局vue-clis npm install -g vue-cli 2.初始化项目(vuecli 项目名称) vue init webpack vuecli //vuecli是项目名 也可以在空项目中输入 vue init webpack 将项目变为 vue-cli项目 3.在vuecli 项目中安装依赖文件 npm install 4.在vuecli 项

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

在开发中,经常会遇到多站点跨域访问后台服务获取数据的情况,解决方法有两种 自己写代理服务,访问代理服务,代理服务请求服务获取数据再返回: 设置浏览器可以跨域访问数据. 本文来讲如何设置IE浏览器跨域访问数据,步骤如下: 打开[Internet选项],窗口如下 选择标签[安全],图片如下 选中[Internet],选择[自定义级别],图片如下:      如上图,在[其他]目录下,设置[跨域浏览窗口和框架]和[通过域访问数据源]为启用,确定,即设置成功! 如果站点为[本地intranet],则选择

Vue中使用jsonp进行跨域请求

Vue-resouse中可以通过this.$http.jsonp的方式直接使用jsonp进行跨域请求.官方在推荐使用axios之后,axios并没有集成jsonp.但在axios的github中(https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp),可以直接安装jsonp并使用他来坐跨域请求. <script> var jsonp = require('jsonp'); export default { data(

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

在最近的项目中,后端使用ABP,前端采用React,前后端完全分离.其中大部分接口都通过WebApi层调用,项目中未使用Session.但最后在做一个留言的验证码时,使用了Session验证的方式,所以将验证码请求与校验功能放在了Web层.由于测试阶段前后端不同域,涉及到跨域请求的问题.跨域问题可以通过代理等手段解决,但是也可以在后端做些简单的修改来进行实现.WebApi的跨域处理比较简单,有官方给出的解决方案.但是Web层一般不涉及跨域,所以自己进行了探索实现. 一.常见方案 在web.con

ajax跨域访问数据

通过json发送和接受数据,数据以json的格式在服务器端和前台进行传递,什么是json数据?这里就不进行详细阐述,轻自行百度解决. 在html5 中利用ajax 异步请求时,会遇到跨域的问题,如果域名不一致.ip地址不一致,端口不一致都会导致跨域请求不成功. 为了解决这个问题,需要在前台和后台均设置相关的属性进行跨域请求. 现在展示服务器端的代码: 自己封装的过滤器: package utils; import java.io.IOException; import javax.servlet

jsonp跨域访问数据

实例一,使用 jquery 的 $.getJSON 方法 //前端js : $("#selId").click(function() { $.getJSON("http://www.example.com/remote.php?callback=?", // callback=?参数是重点,会传递到后台自动处理 {name: 'max', age: 23, str: 'hello'}, function(data) { console.log(data); } );

easyui,datagrid 分页,跨域访问数据

http://blog.itpub.net/30980622/viewspace-2051035/ 思路: 1.通过配置属性,loader加载跨域资源 2.获得$(pager).pagination对象,处理onSelectPage事情 原文地址:https://www.cnblogs.com/xiaoping1993/p/8480646.html

Vue 中dev上实现跨域请求

I  Your application is running here: http://127.0.0.1:8080 [HPM] Error occurred while trying to proxy request /content/showall from 127.0.0.1:8080 to http://localhost:8085/ (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_error

jQuery中通过JSONP来跨域获取数据的三种方式

第一种方法是在ajax函数中设置dataType为'jsonp' $.ajax({ dataType: 'jsonp', url: 'http://www.a.com/user?id=123', success: function(data){ //处理data数据 } }); 第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可 $.getJSON('http://www.a.com/user?id=123&callback=?', function(data){