axios get怎么还会显示跨域_在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哈！

axios get怎么还会显示跨域_在Vue中如何使用axios跨域访问数据相关推荐

axios 跨域传参_在Vue中如何使用axios跨域访问数据
vue.js学习之跨域请求***与axios传参一:跨域请求*** 1:打开config/index.jsmodule.exports{ dev: { } } 在这里面找到proxyTable{} ...
axios get怎么还会显示跨域_react+axios用node代理解决跨域
今天自己搭了个react架子,网上找了个公开的接口,结果发现跨域了.因为接口是别人的,我没法让别人在接口上处理跨域问题,而且这个接口是post请求方式,也没发用jsop处理跨域. 一.前端处理跨域 1 ...
Vue项目开发过程中解决跨域问题（vue.config.js结合axios）
一.问题描述在本地开发过程中,调用后端提供的接口获取数据将获取的数据渲染到页面中,但是浏览器报错: // 控制台报错信息 Access to XMLHttpRequest at 'http://x. ...
axios 超时_聊聊 Vue 中 axios 的封装
axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一 ...
axios vue 加载效果动画_在vue中通过axios异步使用echarts
现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中 ...
project不显示里程碑标志_在Project中设置里程碑
里程碑(任务域) 适用于: Microsoft Project 2010, Project 2007, Project 2003 说明"里程碑"域可指示任务是否为一个里程碑. 计算 ...
vue点击按钮切换显示不同内容_邂逅Vue
01 什么是Vue.js Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架. 看到这里,你就会问了,什么是渐进式? 渐进式就是你可以将Vue作为一个项目中的部分组件改 ...
vue 文件转换二进制_在vue中使用axios实现post方式获取二进制流下载文件(实例代码)...
需求点击导出下载表格对应的excel文件在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现第一步,在 axios 请求中加入参数,表示接收的数据为二进 ...
java 获取 word 窗体域_办公小技巧：巧用窗体域控制Word文档修改区
原标题:办公小技巧:巧用窗体域控制Word文档修改区有时我们发给别人的Word文档,仅仅需要对方修改其中的一小部分,比如房屋出租合同中的房屋承租人信息,采购清单中的数量信息等.这类文档中的其他信息 ...

axios get怎么还会显示跨域_在Vue中如何使用axios跨域访问数据

axios get怎么还会显示跨域_在Vue中如何使用axios跨域访问数据相关推荐

最新文章

热门文章