VUE30 配置跨域

在 Vue 3.0 中，你可以使用 createApp 方法创建一个应用实例，并且可以通过 app.config 来配置跨域。

首先，在你的项目中创建一个 vue.config.js 文件，如果已经存在，则直接修改它。

在 vue.config.js 文件中，添加以下内容来配置跨域：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 设置你想要代理的目标接口的域名
        changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
        ws: true, // 是否启用websockets
        pathRewrite: {
          '^/api': '', // 将请求中的 /api 替换为空，即去掉 /api
        },
      },
    },
  },
};

以上配置中，/api 是你想要代理的接口路径，http://api.example.com 是你想要代理的目标接口的域名。通过将请求中的 /api 替换为空，可以去掉 /api。

保存文件后，重启你的开发服务器，跨域配置就生效了。你可以在你的 Vue 组件中使用 /api 来访问你的代理接口。

例如，你可以这样在组件中发送请求：

axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

以上代码中，axios 是一个常用的 HTTP 请求库，你可以根据自己的需求选择合适的库