React+Vite前端调用外部API时如何解决CORS错误？

核心错误点 #

1. 无效请求头：你在fetch里添加的Access-Control-Allow-Origin是服务器返回的响应头，前端请求时设置这个完全没用，反而可能干扰请求，必须移除。
2. 代理未生效原因：前端请求依然直接调用外部API的完整URL，没有走代理路径；同时代理配置的target设为了完整接口地址，逻辑错误。

修正方案 #

1. 调整前端请求代码 #

将fetch的目标URL改为代理路径，同时移除无效请求头：

const [contaminacion, setcontaminacion] = useState([]);

const obtenerDatos = async () => {
  // 改为请求代理路径，不再直接调用外部URL
  const datan = await fetch("/api", {
    method: "GET",
    headers: {
      "cache-control": "no-cache",
    },
  });
  console.log(datan);
  const dataParsed = await datan.json();
  setcontaminacion(dataParsed.results);
};

useEffect(() => {
  obtenerDatos();
}, []);

2. 修正Vite代理配置 #

将target设为外部API的根域名，通过rewrite把代理路径映射到实际接口路径：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  server:{
    proxy:{
      '/api': {
        // target设为API的根域名
        target: 'https://opendata.aemet.es',
        changeOrigin: true,
        // 将/api重写为实际的API完整路径
        rewrite: (path) => path.replace(/^\/api/, '/opendata/api/red/especial/contaminacionfondo/estacion/07')
      }
    }
  },
  plugins: [react()]
})

如果后续需要调用该域名下的其他接口，推荐更灵活的配置方式：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  server:{
    proxy:{
      '/aemet-api': {
        target: 'https://opendata.aemet.es/opendata/api',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/aemet-api/, '')
      }
    }
  },
  plugins: [react()]
})

对应的请求URL改为/aemet-api/red/especial/contaminacionfondo/estacion/07，后续调用同域名其他接口时只需调整路径即可。

额外说明 #

• Vite代理仅在开发环境生效，生产环境部署时需配置服务器反向代理（如Nginx），或使用可靠的第三方CORS代理服务。
• changeOrigin: true会让代理服务器发送请求时携带目标域名的Host头，避免被API服务器拦截。

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