AXIOS的使用方法

1、下载

apache_conf
npm install axios -s

2、 导入

import axios from 'axios'//引入axios
Vue.prototype.$axios = axios;//把axios挂载到vue上

3、使用

this.$axios({
method:"post",
url:"/login",
data:{
form:this.ruleForm
}
}).then(function (resp){
console.log("请求成功",resp)
}).catch(function(err){
console.log("请求失败",err)
})
}

解决跨域问题

在本地项目中，后端使用的是SpringBoot 开启127.0.0.1:80端口。
在前端，Vue使用的是127.0.0.1:8080端口。
浏览器通过127.0.0.1:8080地址获取到html页面，也就是在127.0.0.1:8080域下面，如果在当前域下面直接请求后端127.0.0.1:80地址，会产生跨域。跨域请求不成功，关键是后端发现跨域请求时，不给做出回应。

解决方法有两种:
1.后端允许跨域请求（SpringBoot使用@CrossOrigin注解，放在Controller类上）
2.前端代理请求。

这里记录一下前端代理请求，解决跨域问题的步骤：

1.导入axios之后，设置前缀

import axios from 'axios';
//设置前缀，任何使用到axios发送请求的地方，目标url都会加上这个前缀
axios.defaults.baseURL = '/api';

2.配置config/index.js文件，在proxyTable对象中添加‘/api’对象

 // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target:'http://localhost:80/', // 你请求的第三方接口
changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
ws: true,
pathRewrite:{
// 路径重写，
'^/api': ''
// 替换axios 请求url中的地址，也就是说^/api=/target，请求target这个地址的时候直接写成/api即可。
}
}
},

3.需要注意的地方是，请求时，url中不要写ip和端口号

this.$axios({
method:"post",
url:"/login",//这里不要带前面的ip和端口号

总结

• 没有设置代理前我的请求是http://127.0.0.1:8080/login端口（前端Vue的地址是8080端口）
• 设置完axios.defaults.baseURL = '/api';请求变成了http://127.0.0.1:8080/api/login（请求失败，因为没有对应的接口）
• 设置config/index.js配置文件之后，代理会把^/api(^表任意) 替换成/target （proxytable设置的target项）
  也就是http://127.0.0.1:8080/api/login中http://127.0.0.1:8080/api/变成了http://localhost:80/
  代理之后的请求地址变成了http://localhost:80/login

最后

以上就是不安月亮为你收集整理的Axios的使用和跨域问题的解决AXIOS的使用方法解决跨域问题总结的全部内容，希望文章能够帮你解决Axios的使用和跨域问题的解决AXIOS的使用方法解决跨域问题总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。