详解在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哈！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VUE axios发送跨域请求需要注意的问题

    VUE axios发送跨域请求需要注意的问题

    在实际项目中前端使用到vue,后端使用php进行开发.前端使用axios请求请求 关于跨域 跨域的概念这些就不说了,百度一大堆相关的资料信息.我就只在这里记录下我在使用当中遇到的问题,以纪念在逝去的几个小时中资料查找的艰辛. 不多说,直接上代码~~~~ 同理,跨域的解决方案为cros.服务器 PHP端代码如下(laravel 中间件进行处理): public function handle($request, Closure $next) { if ($request->isMethod('OP

  • vue使用axios跨域请求数据问题详解

    axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader("Access-Control-Allow-Origin", www.allow-domain.com) 但是很多时候,后台出于一些原因不想修改或者已经写好jsonp的接口需要适应不同平台,此时,前端就可以单独引入依赖解决该问题了. 引入依赖 cnpm install jsonp 导入到vu

  • 详解在Vue中如何使用axios跨域访问数据

    详解在Vue中如何使用axios跨域访问数据

    最近在项目中需要用到axios,所以就恶补一下这个axios到底是什么东东.越来它是vue-resource的替代品,官网也说了,以后都用axios, vue-resource不在维护.那么这个axios怎么用呢,上网搜索了一大堆,基本上都是雷同,我也不知道那些作者有没有在本地测试过.至少我按照网上的做法,总不能成功.经过几天的奋斗,我终于把它搞清楚了,为了不让其他的小伙伴们走弯路,我把我在实际操作中的例子分享给大家,希望对大家有用. 一.安装axios 老规矩,要想使用axios,我们得安装它

  • 详解为什么Vue中不要用index作为key(diff算法)

    前言 Vue 中的 key 是用来做什么的?为什么不推荐使用 index 作为 key?常常听说这样的问题,本篇文章带你从原理来一探究竟. 另外本文的结论对于性能的毁灭是针对列表子元素顺序会交换.或者子元素被删除的特殊情况,提前说明清楚,喷子绕道. 本篇已经收录在 Github 仓库,欢迎 Star: https://github.com/sl1673495/blogs/issues/39 示例 以这样一个列表为例: <ul> <li>1</li> <li>

  • 详解为什么Vue中的v-if和v-for不建议一起用

    详解为什么Vue中的v-if和v-for不建议一起用

    本文主要介绍了为什么v-if和v-for不建议一起用?分享给大家,具体如下: 一.作用 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 true值的时候被渲染 v-for 指令基于一个数组来渲染一个列表.v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组或者对象,而 item 则是被迭代的数组元素的别名 在 v-for 的时候,建议设置key值,并且保证每个key值是独一无二的,这便于diff算法进行优化 两者在用法上 <

  • Vue.js 中 axios 跨域访问错误问题及解决方法

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起请求时,出现如下错误: Failed to load http://www.test.com/apis/index.php?&act=login: The value of the 'Access-Control-Allow-Origin' headerin the response must no

  • 在vue中使用jsonp进行跨域请求接口操作

    前言: 这里我们使用的是第三方插件jsonp. github网址:https://github.com/webmodules/jsonp 1.安装 npm install jsonp -S 2.引入 一般新建一个js文件来引入原始jsonp插件,然后对原始插件进行封装,对跨域接口参数的拼接,封装好这个jsonp文件后export出去,之后在哪里用到就再在那里import. 1.新建jsonp.js文件来封装原始jsonp插件 // 引入原始jsonp插件 import originJsonp f

  • Nginx解决vue项目服务器部署及跨域访问后端详解

    Nginx解决vue项目服务器部署及跨域访问后端详解

    目录 准备 1.前端代码注意事项: 2.虚拟机的Nginx配置关键点: 测试 总结 准备 (1)首先是一个Vue项目. (2)其次准备好服务器(在这里我是用虚拟机VMware). (3)准备好一个SpringBoot后端代码. (4)服务器上必须安装Nginx. 1.前端代码注意事项: (1)在这里我是用vuecli3脚手架创建的vue项目的,所以项目创建完毕之后是没有vue.config.js的. 其实这个文件的创建是为了本地测试解决前后端跨域问题的,但是在打包项目的时候需要把这里关于跨域的代

  • webpack+vuex+axios 跨域请求数据的示例代码

    本文介绍了webpack+vuex+axios 跨域请求数据的示例代码,分享给大家,具体如下: 使用vue-li 构建 webpack项目,修改bulid/config/index.js文件 dev: { env: require('./dev.env'), port: process.env.PORT || 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable:

  • react axios 跨域访问一个或多个域名问题

    1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: "proxy":"http://iot-demo-web-dev.autel.com", //当然,这里是一个假地址 像这样: 这样跨域便完成了,当然,也可以像网上那样,多几段代码,像这样: 我不知道你们写入这段代码会怎么样,反正我是会报错,具体报错是怎么我这里没办法展示,因为我的项目已经 运行了 npm run eject 这个命令 报错的意思

  • 详解在Vue中使用TypeScript的一些思考(实践)

    Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个"子类".此种写法与 Vue 单文件组件标准形式最为接近,唯一不同仅是组件选项需要被包裹在 Vue.extend() 中. vue-class-component:通常与 vue-property-decorator 一起使用,提供一系列装饰器,能让我们书写类风格的 Vue 组件. 两种形式输出

随机推荐