vue项目使用webpack-dev-server调用第三方接口

项目需要调用第三方天气接口，为什么不用官方的接口，别问我，我也不知道，就是要免费的。

1. 网上找了一个免费的天气接口，接口完整地址

url:https://www.sojson.com/open/api/weather/json.shtml?city=
// = 后面是城市名称，如北京、上海、成都、西安

2. 因为项目使用的是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' 
            }
      }
    }
}

3. 在对应的组件中发起请求

<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>

4. 请求ok，跨域请求第三方接口配置完成