已开启Vite全局CORS仍无法访问外部HTTPS源的问题求助

你的问题核心是混淆了Vite开发服务器的CORS配置和前端跨域请求第三方API的解决方案：你配置的server.cors是控制外部请求你的Vite开发服务器时的跨域规则，而不是解决前端直接请求第三方API的CORS限制——第三方API服务器没有允许你的前端域名跨域，所以浏览器会拦截请求。

正确的解决方案是用Vite的代理功能，让Vite开发服务器替你转发请求（服务器间请求不受浏览器CORS限制），具体步骤如下：

1. 修改Vite配置文件（vite.config.js） #

重点配置server.proxy，将前端的请求转发到目标API地址：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import * as fs from 'fs';

export default defineConfig({
  server: {
    proxy: {
      // 匹配以/api开头的请求
      '/api': {
        target: 'https://gegevensmagazijn.tweedekamer.nl',
        changeOrigin: true,
        // 把请求路径中的/api前缀去掉，转发到目标地址
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
    // 保留你的HTTPS配置
    https: {
      key: fs.readFileSync('./.cert/key.pem'),
      cert: fs.readFileSync('./.cert/cert.pem'),
    }
  },
  define: {
    'process.env': {}
  },
  plugins: [react()],
})

2. 修改前端的Fetch请求 #

将原来的绝对URL改为相对路径，以/api开头：

const response = await fetch("/api/OData/v4/2.0/persoon");
const person = await response.json();
console.log(person);

为什么这样能解决问题？ #

• 前端请求的是你的Vite开发服务器（同源），不会触发浏览器CORS检查；
• Vite服务器收到请求后，会替你转发到目标第三方API（服务器间请求不受CORS限制）；
• 第三方API返回的结果会被Vite服务器转发回前端，完成整个请求流程。

关于之前的server.cors配置 #

这个配置是用来控制外部服务请求你的Vite开发服务器时的跨域规则（比如另一个前端项目调用你的开发接口），和你请求第三方API的场景无关，所以设置origin: '*'或true都无法解决你的问题。

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