在vite中配置代理服务器解决跨域问题

孙泽辉

发布于：2021年9月20日

字数：255字

时长：1分钟

次浏览

昨天的问题解决了，还是直接查文档才是正道。

问题

使用他给的两个方法都不行：

react解决跨域问题 - 简书 (jianshu.com)

还会报这个错误

Unrestricted file system access to “/api/zhihu”
For security concerns, accessing files outside of serving allow list will be restricted by default in the future version of Vite. Refer to https://vitejs.dev/config/#server-fs-allow for more details.

因为我是用的vite，两种方法一点效果也没有。

解决

查文档，原来vite有配置代理的地方，之前配置在package.json不行，估计是vite帮我把配置覆盖了吧，这次我直接在vite.config.js里配置

import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true,
      },
    },
  },
});

在配置文件里加上server这段代码就可以了

效果

请求3000端口的代理服务器，帮我转发到了8080，成功了。

附文档链接

配置 Vite | Vite 官方中文文档 (vitejs.dev)