如何在Vite中配置跨域以解决与Express服务器的CORS问题

一、Vite端的两种配置方案 #

1. 配置代理（推荐，彻底避免跨域） #

如果不想在Express侧额外调整，或者后续有更多跨域请求需求，可以在Vite配置文件（vite.config.js/vite.config.ts）中添加代理规则，将指向Server2的请求转发到目标服务器，这样页面内的请求就变成同域请求，无需处理CORS：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/Test': {
        target: 'http://localhost:9050',
        changeOrigin: true
      }
    }
  }
})

修改页面中的脚本标签为相对路径：

<script src="/Test" type="module"></script>

2. 配置Vite的CORS响应头 #

如果需要让Vite服务器允许其他域名（比如Server2）访问自身资源，可以直接开启并配置server.cors：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    cors: {
      origin: 'http://localhost:9050',
      methods: ['GET', 'POST', 'OPTIONS'],
      allowedHeaders: ['Content-Type']
    }
  }
})

注意：你当前遇到的是从Vite页面加载Express脚本的跨域问题，本质是浏览器向Express请求资源，因此最直接的方式还是在Express侧配置CORS（你已了解该方法），允许Vite默认域名http://localhost:5173的访问。

二、关于iframe/embed的后续方案 #

如果你的目标是让Server2的代码在自身独立环境中运行（而非Vite页面的上下文），使用iframe或embed是合理选择：

• 在Vite页面中嵌入Server2的页面即可：

  <iframe src="http://localhost:9050/your-target-page" frameborder="0"></iframe>
  

• 这种方式下，iframe内的代码运行在Server2的域名上下文，既不会与Vite页面的上下文冲突，也能避免跨域脚本执行的问题。

内容的提问来源于stack exchange，提问作者Alex