vue3 vite axios里的url加上域名后本地proxy配置无效

在 Vue 项目中使用 Vite 作为构建工具时，如果在 axios 的请求 URL 中直接指定了完整的域名（例如 http://example.com/api），那么 Vite 的代理配置 (proxy) 将不会生效。这是因为 Vite 的代理配置仅对开发环境中的相对路径有效，当 URL 包含完整域名时，请求将直接发送到指定的服务器，而不会被代理。

解决方案

1、修改请求 URL 为相对路径： 如果可能的话，将请求 URL 修改为相对路径（例如 /api），然后通过 Vite 的代理配置来重定向这些请求到目标服务器。

2、使用环境变量替换域名：

• 在 .env 文件中定义一个环境变量，例如 VITE_API_BASE_URL=http://localhost:3000。
• 在你的代码中使用这个环境变量来构建请求 URL。

import { computed } from 'vue';

const baseUrl = import.meta.env.VITE_API_BASE_URL;
const apiRequestUrl = computed(() => `${baseUrl}/api/some-endpoint`);

3、配置 axios 实例的拦截器：

可以在 axios 实例上配置请求拦截器，用来修改请求的 URL。

import axios from 'axios';

const instance = axios.create();

instance.interceptors.request.use(config => {
  if (config.url.startsWith('http')) {
    // 如果 URL 已经包含了完整域名，则不进行任何修改
    return config;
  }
  // 否则，添加代理前缀
  config.url = '/api' + config.url; // 假设 Vite 代理配置中使用了 /api 作为前缀
  return config;
});

export default instance;

4、调整 Vite 配置文件： 确保你的 Vite 配置文件 (vite.config.ts 或 vite.config.js) 中正确设置了代理规则。

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

通过上述方法之一，你可以解决在使用完整域名 URL 时遇到的 Vite 代理配置无效的问题。选择最适合你项目需求的方法来实施。