vue3 引入腾讯地图解决请求接口跨域问题

最新推荐文章于 2024-07-03 16:27:59 发布

Baobao小包

最新推荐文章于 2024-07-03 16:27:59 发布

阅读量1.2k

点赞数 5

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/forever__fish/article/details/129943902

版权

文章介绍了在Vue3项目中解决跨域问题的一种方法，即通过重写jsonp函数来实现。首先在index.html引入QQ地图API，然后详细讲解了如何编写一个自定义的jsonp函数，包括创建动态script标签、设置回调函数以及错误处理。最后展示了在组件中如何调用这个jsonp函数进行接口请求。

摘要由CSDN通过智能技术生成

上一篇文章中写到使用 uniapp 如何解决跨域问题，那么在使用 Vue3 时，又该如何去处理呢？

一、在 index.html 中引入

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=自己申请的key"></script>

二、重写 jsonp

重写 jsonp，我们就不用在项目中安装 jsonp 了。

export const jsonp = function (url, data) {
  return new Promise((resolve, reject) => {
    // 1.初始化url
    let dataString = url.indexOf('?') === -1 ? '?' : '&'
    let callbackName = `jsonpCB_${Date.now()}`;
    url += `${dataString}callback=${callbackName}`
    if (data) {

      // 2.有请求参数，依次添加到url
      for (let k in data) {
        url += `&${k}=${data[k]}`
      }
    }

    let scriptNode = document.createElement('script');
    scriptNode.src = url;