Vue使用Axios实现http请求以及解决跨域问题
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。Axios的中文文档以及github地址如下:
中文:https://www.kancloud.cn/yunye/axios/234845
github: https://github.com/axios/axios
vue路由文档:https://router.vuejs.org/zh/
一、安装Axios插件
npm install axios --save
二、在main.js中引入Axios库
import Axios from "axios"
//将axios挂载到原型上
Vue.prototype.$axios = Axios; //配置全局的axios默认值(可选) axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
三、使用get方式的http请求
this.$axios.get("请求url",{param:{}})
.then(function(response){
console.info(response.data);
})
.catch(function(error){
console.info(error);
});
四、使用post方式的http请求
this.$axios.post("请求路径",{})
.then(function(response){
console.info(response.data);
})
.catch(function(error){
console.info(error);
});
注意:使用上述post方式提交参数的时候存在问题,axios中post的请求参数格式是form-data格式。而上述json串的格式为x-www-form-urlencoded格式
例如:
form-data:?name="zhangsan"&age=10
x-www-form-urlencoded:{name:"zhangsan",age:10}
此时我们需要将数据格式作转换,在当前页面引入第三方库qs
import qs from "qs"
此时上述参数改为:
this.$axios.post("请求路径",qs.stringify({}))
.then(function(response){
console.info(response.data);
})
.catch(function(error){
console.info(error);
});
五、Axios的拦截器
拦截器在main.js中进行配置,配置如下:
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}); // 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
基于以上的拦截器,我们可以对请求的数据或者是响应的数据做些处理,就拿上面post方式的请求参数格式举个例子,通过拦截器我们可以对所有的post方式的请求参数在发出请求之前作出转换:
import qs from "qs" // 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 参数格式转换
if(config.method=="post"){
config.data = qs.stringify(config.data);
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
六、前端跨域解决方案(了解)
描述:由于使用vue脚手架的目的就是使前后端分离,前端请求后端的数据在测试阶段设计到跨域请求问题,在前端中我们可以通过如下配置解决跨域请求问题。
第一步(在config文件夹下的index.js中进行如下修改)
proxyTable:{
"/api":{
target:"后端提供服务的前缀地址",
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
},
第二步(在main.js中添加一个代理)
Vue.prototype.HOST='/api'
再进行请求的时候只需要使用 url = this.HOST + "请求的Mappering地址" 即可。
(注意:在上述过程中修改了config下的配置文件,服务需要重新启动,才能生效)
声明:此种跨域只适用于测试开发阶段,项目正式上线并不实用,需要后端去处理跨域问题
Vue使用Axios实现http请求以及解决跨域问题的更多相关文章
- 【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题
[手摸手,带你搭建前后端分离商城系统]02 VUE-CLI 脚手架生成基本项目,axios配置请求.解决跨域问题. 回顾一下上一节我们学习到的内容.已经将一个 usm_admin 后台用户 表的基本增 ...
- vue开发环境和生产环境里面解决跨域的几种方法
什么是跨域 跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu. ...
- nuxt.js axios使用poxyTable代理,解决跨域问题
1 安装(@gauseen/nuxt-proxy) cnpm install @gauseen/nuxt-proxy --save 2 配置nuxt.config.js modules: [ // 请 ...
- vue项目开发,用webpack配置解决跨域问题
今天在本地开发时候碰到了跨域的问题,突然觉着跨域问题在所难免啊,之前没有没有碰到总觉着解决跨域很高大上的样纸,其实就是受限于网络的同源策略,跨域前后端都可以进行处理. 1,后端更改header hea ...
- vue项目打包本地后通过nginx解决跨域
前言 有时候我们打包好vue项目让后端人员部署项目时可能会有小插曲,为了不麻烦后端人员和避免尴尬,最好的办法就是在本地自己先测一下,而在本地运行打包后的项目会遇到接口跨域的问题.我平时经常用的方法就是 ...
- axios的数据请求方式及跨域
express 的三大功能:静态资源.路由.模板引擎 app.use(express.static('www')); 只要是创建这个静态的目录,这个 www 的静态目录里面的文件就可以被访问 数据的请 ...
- vue 本地环境API代理设置和解决跨域
写一个config.js文件,作为项目地址的配置. //项目域名地址 const url = 'https://exaple.com'; let ROOT; //由于封装的axios请求中,会将ROO ...
- vue cli3.3 以上版本配置vue.config.js 及反向代理操作解决跨域操作
const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.Pro ...
- [django]django配合前端vue前后端联调,django服务端解决跨域(django-cors-headers)
django内部csrf post提交数据解决 https://www.cnblogs.com/iiiiiher/articles/9164940.html 前端写了个页面,里面$.post发现403 ...
随机推荐
- Windows10出现打开EXE应用程序错误
运行部分EXE文件,弹出错误“该文件没有与之关联的程序来执行该操作 右键开始菜单, PowerShell(管理员) 也是一样 连安装程序Vs2017都无法启动,用了多种方法都不能搞定. 花了不少时间 ...
- winfrom 界面时间动态加载
Timer time1 = new Timer(); private void time1_Tick(object sender, EventArgs e) { lTime.Text = DateTi ...
- Spring自定义标签的实现
首先 简单写下 spring xml解析的过程 通过一段简单的 调用spring代码开始 public static void main(String[] args) { ApplicationCon ...
- Flutter-动画-概念篇
一.Flutter中的动画的基本概念图 二.Flutter各动画的概念 视图动画 补间动画 就是一个View,定义了起点和终点.时间以及运动曲线,并按照所定规则由起点运动到终点的过程. 帧动画 帧动画 ...
- Linux监控服务并主动重启
Linux查询后台进程,如果没有进程号,则重启服务: #!/bin/sh basepath=$(cd ``; pwd) while true do procnum=`ps -ef|grep " ...
- 读书笔记《SpringBoot编程思想》
目录 一. springboot总览 1.springboot特性 2.准备运行环境 二.理解独立的spring应用 1.应用类型 2.@RestController 3.官网创建springboot ...
- promises的深入学习
Promise 的含义 § ⇧ Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供 ...
- 第十五章·Kibana深入-Dev Tools及Lucene语法
Dev Tools介绍 Dev Tools 页面包含开发工具,您可以使用这些Dev Tools与Kibana中的数据进行交互. 原先的交互式控制台Sense,使用户方便的通过浏览器直接与Elastic ...
- kubernetes资源清单之DaemonSet
什么是 DaemonSet? DaemonSet 确保全部(或者某些)节点上运行一个 Pod 的副本.当有节点加入集群时,也会为他们新增一个 Pod . 当有节点从集群移除时,这些 Pod 也会被回收 ...
- ISO/IEC 15444-12 MP4 封装格式标准摘录 3
目录 Track Data Layout Structures Data Information Box Data Reference Box Sample Size Boxes Compact Sa ...