vue3跨域

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 解决跨域问题的配置，通常在后端进行配置，但前端也可以通过代理来解决
// 这里是使用 Vue CLI 提供的代理功能，适用于开发环境

app.config.globalProperties.$http = axios.create({
  baseURL: '/api', // 设置统一的接口请求前缀
  timeout: 5000,   // 请求超时时间
});

// 配置代理
if (process.env.NODE_ENV === 'development') {
  const { createProxyMiddleware } = require('http-proxy-middleware');
  module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:3000', // 后端服务地址
          changeOrigin: true,
          pathRewrite: {
            '^/api': '', // 将 /api 替换为空字符串，避免路径冲突
          },
        },
      },
    },
  };
}

app.mount('#app');

解释说明：

1. axios 创建实例：我们创建了一个全局的 axios 实例，并设置了 baseURL 和 timeout。这样可以确保所有的 API 请求都以 /api 开头，并且有统一的超时时间。
2. Vue CLI 代理配置：在开发环境中，使用 http-proxy-middleware 来配置代理。通过设置 proxy，我们将所有以 /api 开头的请求转发到后端服务器（例如 http://localhost:3000）。这可以避免开发环境中的跨域问题。
3. pathRewrite：为了避免路径冲突，我们将 /api 替换为空字符串，这样后端接收到的请求路径就不会包含 /api。

注意：

• 这种代理配置只适用于开发环境（process.env.NODE_ENV === 'development'），生产环境中需要通过其他方式处理跨域问题，例如在 Nginx 或其他反向代理服务器中配置。
• 如果你使用的是 Vite 而不是 Vue CLI，代理配置的方式会有所不同。