项目需要调用第三方天气接口，为什么不用官方的接口，别问我，我也不知道，就是要免费的。
- 网上找了一个免费的天气接口，接口完整地址
url:https://www.sojson.com/open/api/weather/json.shtml?city=
// = 后面是城市名称，如北京、上海、成都、西安
- 因为项目使用的是webpack前后端分离， 前端要直接访问第三方接口（vue-cli搭建的是express本地服务器），需要跨域。vue-cli 脚手架自带webpack-dev-server ，dev-server非常强大，可以使用代理url，在本地的配置文件config/index.js中，修改配置文件：
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: '/',
assetsPublicPath: '/',
proxyTable: {
/open':{
target:"https://www.sojson.com/", // 目标
changeOrigin: true, //是否跨域
pathRewrite: {
'^/open': '/open'
}
}
}
}
- 在对应的组件中发起请求
<template>
<div class="Home">
</div>
</template>
<script>
import {mapActions} from "vuex";
import {systemUrl} from "./../urlCfg.js";
export default {
data() {
return {
}
},
methods: {
submitForm() {
this.$ajax({
method: "post",
url: '/open/api/weather/json.shtml'，
params: {
city: '北京'
}
})then(({data}) => {
if (data.message === "success") {
console.log(data.data)
}
});
});
}
},
mounted() {
this.submitForm()
}
};
</script>
<style lang="scss" scoped>
</style>
- 请求ok，跨域请求第三方接口配置完成
