vue cli3 项目中解决跨域

最近项目中用到高德api，要做一个天气的模块。

做这个天气的模块，得知道用户所在得城市

于是呢，我就在vue项目中获取了当前用户得ip,根据用户的ip定位了城市

具体代码：

vue页面：

<template>

  <div>

    <remote-js src="http://pv.sohu.com/cityjson?ie=utf-8"></remote-js>

  </div>

</template>

<script>

    export default {

      components : {

      'remote-js': {

      render(createElement) {

      return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});

  },

  props: {

      src: { type: String, required: true },

  },

},

},

    }

</script>

mounted(){

  this.city()

}

methods: {

  city(){

      var ip = returnCitySN["cip"];

     axios.get(`https://restapi.amap.com/v3/ip?ip=${ip}&output=json&key=<你自己的ke'y>`)

     .then(function(res) {

    })

     .catch(function(err) {

     console.log(err)

     })

  }

}

vue.config.js 文件 (没有就自己在根目录创建)

module.exports = {

devServer: {

    proxy: {

    '/api': {

    targer :"https://restapi.amap.com/v3/ip",

    ws: true,

    changeOrigin: true,

    pathRewrite: {

         '^/api': '/api'

    }

  }

}

},

}

方法二：

1.执行命令：npm install vue-jsonp --save；

2.添加到main.js中；

import VueJsonp from 'vue-jsonp'

Vue.use(VueJsonp)

3.使用

this.$jsonp('请求url',jsonParams).then(popData => {

    if(popData) {

        .............

    }

})