vue项目使用axios对接第三方api,并做跨域处理

简介 使用 vue 框架对接第三方接口时,常常使用 anxios。 有很多时候你在构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种,而使用基于

简介

使用 vue 框架对接第三方接口时,常常使用 anxios。

有很多时候你在构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种,而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种。 vue官网描述

基本步骤

安装 anxios

1
npm install axios --save

配置

在 src/main.js 中如下声明使用

1
2
3
import axios from 'axios';

Vue.prototype.$axios=axios;

跨域处理

在 config/index.js 中的 的 dev 添加以下代码,设置一下 proxyTable

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
dev: {
...
//加入以下
proxyTable:{
'/seniverseapi': {
target : 'https://api.seniverse.com', //设置你调用的接口域名和端口号.别忘了加http
changeOrigin : true, //允许跨域
pathRewrite : {
'^/seniverseapi': ''
// '/'这里理解成用‘/seniverseapi’代替target里面的地址,后面组件中我们掉接口时直接用api代替。比如我要调用'https://api.seniverse.com/v3/weather/now.json?key=我的密钥&location=beijing&language=zh-Hans&unit=c',直接写'/seniverseapi/v3/weather/now.json?key=我的密钥&location=beijing&language=zh-Hans&unit=c
'参数即可
}
}
},
...
}

api 调用

1
2
3
4
5
axios
.get(/seniverseapi/v3/weather/now.json?key=我的密钥&location=beijing&language=zh-Hans&unit=c
)
.then(response => (console.log(response)))
.catch(error => (console.log(error)))

效果图


vue项目使用axios对接第三方api,并做跨域处理
https://www.frytea.com/post/20190318015100.html
作者
Tianlun Song
发布于
2019年3月18日
更新于
2024年6月10日
许可协议