Vue3+TS 怎么解决跨域

在 Vue3 中使用 TypeScript（TS）解决跨域问题，可以按照以下步骤进行操作：

1. 安装 `axios` 库：在项目根目录下打开终端，执行以下命令安装 `axios` 库。

   npm install axios

2. 在项目的 `src` 目录下创建一个 `api` 文件夹，并在其中创建一个名为 `index.ts` 的文件。

3. 在 `index.ts` 文件中编写跨域请求的代码，示例如下：

   import axios from 'axios';

   const instance = axios.create({
     baseURL: 'http://api.example.com',  // 设置基础URL
     timeout: 5000,  // 设置请求超时时间
     withCredentials: true  // 允许发送跨域请求时携带凭证
   });

   export default instance;

4. 在需要发送跨域请求的地方导入 `axios` 实例并使用，示例如下：

   import axios from '@/api/index';

   axios.get('/users')
     .then(response => {
       // 处理响应数据
     })
     .catch(error => {
       // 处理错误
     });

5. 在 Vue3 项目的根目录中找到 `vue.config.js` 文件（如果没有则创建），并添加以下配置：

   module.exports = {
     devServer: {
       proxy: {
         '/api': {
           target: 'http://api.example.com',  // 设置代理目标地址
           changeOrigin: true,  // 启用跨域
           pathRewrite: {
             '^/api': ''  // 将请求地址中的 /api 替换为空字符串
           }
         }
       }
     }
   };

6. 重启开发服务器，重新编译项目。现在，你可以在 Vue3 中使用 TypeScript 发送跨域请求了。

以上是一种常见的解决跨域问题的方法，通过设置代理来实现跨域请求。根据你的实际需求，还可以使用其他方法进行跨域处理，如 JSONP、CORS 等。