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

这篇具有很好参考价值的文章主要介绍了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文章来源地址https://www.toymoban.com/news/detail-805844.html

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

到了这里，关于vue调用腾讯地图API报错跨域问题解决Access to XMLHttpRequest at‘httplocalhost的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！