当前位置：首页 > news >正文

Vite环境下解决跨域问题

news 来源：原创 2025/6/23 9:51:14

在 Vite 开发环境中，可以通过配置代理来解决跨域问题。以下是具体步骤：

在项目根目录下找到 vite.config.js 文件：如果没有，则需要创建一个。
配置代理：在 vite.config.js 文件中，使用 server.proxy 选项来设置代理规则。例如，如果你的后端服务器运行在 http://localhost:5054 ，而你的 Vite 开发服务器运行在 http://localhost:3000 ，你可以这样配置：
javascript

import { defineConfig } from 'vite';

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

上述代码中，/api 是代理的路径前缀。当浏览器发送以 /api 开头的请求时，Vite 会将请求代理到 http://localhost:5054 上，并去除路径中的 /api 前缀。changeOrigin 设置为 true ，表示修改请求头中的 Origin 字段，使其与目标服务器的域名一致，以避免跨域错误。

4.在前端代码中使用代理路径：修改你的 axios 请求地址，使用代理路径。例如：

const service = axios.create({ baseURL: '/api' });
const response = service.get('User/1/2');

这样，原本跨域的请求就会通过代理服务器转发，从而解决跨域问题。

如果不想在 vite.config.js 中配置代理，也可以使用浏览器的扩展程序来解决跨域问题，如 Allow CORS: Access-Control-Allow-Origin 等。安装并启用扩展程序后，它会在浏览器层面允许跨域请求，不过这种方法只适用于开发环境，生产环境中还是需要在服务器端进行配置。

代码图示