vue调用腾讯地图API报错跨域问题解决Access to XMLHttpRequest at‘httplocalhost

1.下载vue-jsonp解决跨域问题

npm install vue-jsonp

2.在main.js中引用

import { VueJsonp } from 'vue-jsonp'

Vue.use(VueJsonp)

3.调用腾讯地图API

  var url = 'https://apis.map.qq.com/ws/location/v1/ip';
        this.$jsonp(url, {
          key: '你的Key',
          output: 'jsonp',
          // 以下填写需要携带的参数（有几个写一个）
          ip: ip,
        }).then(res => {
          if (res.status == 0) {
            this.location = {
              cityId: '510100',
              lat: res.result.location.lat,
              lon: res.result.location.lng,
              time: new Date().getTime(),
            };
            console.log('定位结果', this.location);
            this.getCity(res.result.location.lat, res.result.location.lng)
          } else {
            this.location = {
              cityId: this.supplier == 'FXZB' ? '510100' : 16,
              city: "成都",
            };
            this.$store.commit("CITY_GET", this.location);
            sessionStorage.setItem("location", JSON.stringify(this.location));
            sessionStorage.setItem("place", JSON.stringify(this.location));
            Toast.clear();
          }
          // 请求成功后的数据

        })

4.获取本机IP

   async fetchIP() {
      const res = await fetch('https://api.ipify.org?format=json')
      const json = await res.json()
      return json.ip
    },  
const ip = await this.fetchIP()