「案例」vue3.2 + TS 项目中使用 jsonp 插件解决跨域请求

在 Vue 3.2 和 TypeScript 环境下，你可以使用第三方库如 jsonp 来解决跨域请求的问题。以下是一个简单的示例：

首先，安装 jsonp 库：

npm install jsonp

然后，你可以在 Vue 组件中这样使用它：

<template>
  <div>
    <button @click="fetchCrossDomainData">获取跨域数据</button>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import jsonp from 'jsonp';
 
export default defineComponent({
  name: 'CrossDomainComponent',
  methods: {
    fetchCrossDomainData() {
      const url = 'https://example.com/api/data?callback=handleResponse'; // 这里替换为你的API URL
      jsonp(url, (err: any, data: any) => {
        if (err) {
          console.error(err);
        } else {
          console.log('Received data:', data);
          // 处理你的数据
        }
      });
    },
  },
});
</script>

在这个例子中，我们创建了一个按钮，当点击时，会调用 fetchCrossDomainData 方法来发送 JSONP 请求。请求的 URL 应该是你的跨域 API 的地址，并且确保它支持 JSONP 调用。

注意：JSONP 请求不是真正的 AJAX 请求，它通过动态添加一个 <script> 标签到 DOM 来实现跨域通信，所以它没有 XMLHttpRequest 提供的很多功能，如进度监控、超时处理等。因此，它适用于简单的请求，不适合复杂的场景。