vue2使用axios发送post和get请求(含跨域解决
安装axios
百度搜索axios找到axios中文文档,找到安装命令
npm install axios
或者 npm i axios
npm i axios
是 npm install axios
的简写,二者没区别
安装axios快捷插件(省去记忆烦恼
插件名:Axios Snippets
作者:Yggdrasill-7C9
在vue中引入axios
import axios from 'axios'
在方法中使用,发送post请求
其他请求参照axios中文文档
axios
.post("请求api地址", '请求参数对象')
.then((res) => {
console.log("post类型请求返回的数据", res.data);
})
.catch((err) => {
console.error('请求失败信息',err);
});
完整vue代码
点击查看代码
<template>
<div id="app">
<div>
<button
@click="requestPost"
style="height: 50px; line-height: 50px; font-size: 25px"
>
点我向 abc.yongheng.work 发起post类型的ajax,请求数据
</button>
<span ref="post"></span>
</div>
<br />
<br />
<br />
<br />
<div>
<button
@click="requestGet"
style="height: 50px; line-height: 50px; font-size: 25px"
>
点我向 abc.yongheng.work 发起get类型的ajax,请求数据
</button>
<span ref="get"></span>
</div>
</div>
</template>
<script>
// 安装完axios后,导入axios
import axios from "axios";
export default {
name: "App",
components: {},
methods: {
requestPost() {
// axios发起post请求,并携带post参数name
axios
.post("/api/Test/index", { name: "anbin" })
.then((res) => {
console.log("post类型请求", res.data.data[0]);
this.$refs.post.innerHTML = JSON.stringify(res.data.data);
})
.catch((err) => {
console.error(err);
});
},
requestGet() {
// axios发起get请求,不携带参数,此处是get请求简写,完整写法为 axios.get("/index/index/getData")
axios("/index/index/getData")
.then((res) => {
console.log("get类型请求", res.data);
this.$refs.get.innerHTML = JSON.stringify(res.data);
})
.catch((err) => {
console.error(err);
});
},
},
};
</script>
post方式携参请求
// 获取用户数据列表
export const getUser = (params) => {
return axios.post(`${url}index`, params);
}
get方式携参请求
// 获取用户数据列表
export const getUser = (params) => {
return axios.get(`${url}index`, {
params: { ...params }
});
}
vue跨域的思路
vue-cli内置了一个服务器,默认端口为8000
当使用vue请求不同域名的后端接口时,会产生跨域报错
要解决该问题,需要借助vue内置的服务器,作为中转站(也可以理解为房租租赁里的中介 / 借力跳板)
因为服务器与服务器之间是不受浏览器跨域限制的,跨域只有触发了浏览器的同源策略才会产生
所以才需要配置下面vue.config.js中的devServer.proxy,以让vue服务器帮我们请求真实的api地址获取资源
跨域解决(一
上述两个方法requestPost和requestGET分别用于发起一个post类型ajax请求和get类型的ajax请求
请求的api地址分别是:
- http://abc.yongheng.work/api/Test/index
- http://abc.yongheng.work/index/index/getData
但可以看到axios中只写了剔除域名后的后半段地址,并没有写全
这是为了解决vue中跨域问题,需要进入到与src同级目录的vue.config.js
配置vue-cli(vue脚手架)
中跨域配置项devServer.proxy
,对请求的api分别进行跨域配置
跨域解决(二
进入vue.config.js
第一种简便方式(不推荐使用
直接配置devServer.proxy
为要请求的api域名
但这样在vue项目中,不可能只请求一个域名,所以这种方式不推荐
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: 'http://abc.yongheng.work',
}
})
第二种简便方式(推荐使用
在配置项devServer.proxy
中,分别为不同路径进行配置信息,可以对不同路径进行不同的api配置
例如此处/api和/index,分别对以api开头和以index开头的api路径分别进行了配置
api开头路径对应: http://abc.yongheng.work/api/Test/index
index开头路径对应: http://abc.yongheng.work/index/index/getData
- target解释:真实请求的域名网址,可以分别对不同的路径进行不同的域名配置,解决了vue项目中多域名接口的问题。
- target补充:会自动拼接axios中的请求路径,组成完整的api请求路径,例如此处的http://abc.yongheng.work + 上面的/api/Test/index = http://abc.yongheng.work/api/Test/index
- ws解释:是否开启支持ws协议(websocket协议)
- changeOrigin解释:是否隐藏真实请求来源,让服务端无法区分真实请求来源
- pathRewrite解释:相当于后端的nginx伪静态重写功能,此处^/index的含义是:找到路径中的index将其替换为index,相当于把http://abc.yongheng.work/index/index/getData替换为了http://abc.yongheng.work/index/index/getData(是的,从作用来说没啥用,只是演示一下可以替换请求路径...),
- pathRewrite补充:但从另一个角度来说,pathRewrite的作用是:前端可以写假的api地址,例如sss,然后使用pathRewrite改写为真实地址路径,这可以隐藏api的真实地址路径,因为在浏览器中只能看到http://abc.yongheng.work/sss,而不是http://abc.yongheng.work/真实地址路径
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
'/api': {
target: 'http://abc.yongheng.work',
ws: true,
changeOrigin: true
},
'/index': {
target: 'http://abc.yongheng.work',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/index': '/index',
},
},
}
}
})