Vite项目中API请求被CORS策略拦截的问题求助

问题根源分析 #

你遇到的错误核心是错误地将响应头当成请求头发送：Access-Control-Allow-Origin是服务器返回给浏览器的响应头，用于告知浏览器允许哪些源访问接口，前端不应该把它作为请求头发送给服务器。浏览器检测到你发送了这个未被服务器允许的请求头，因此触发CORS拦截。

具体修复步骤 #

1. 移除错误的Axios请求头配置

首先删除Axios中多余的Access-Control-Allow-Origin设置，同时对于GET请求，Content-Type: application/json也无需设置（GET请求没有请求体，默认的请求头即可，额外设置会触发浏览器的预检OPTIONS请求，反而增加复杂度）。

修改后的Axios配置：

import axios from "axios";

// 移除错误的响应头设置，删除不必要的Content-Type配置
export const api = axios.create({
  baseURL: "/api", // 改为代理路径，后续配合Vite代理使用
});

2. 配置Vite代理转发请求

第三方API如果未开放CORS权限，前端最稳妥的解决方式是通过Vite的代理功能，将请求转发到目标API。这样浏览器请求的是同源的Vite服务器，由Vite服务器作为中间层转发请求到第三方API，规避浏览器的CORS检查。

在项目根目录的vite.config.js（或vite.config.ts）中添加代理配置：

import { defineConfig } from 'vite'
// 根据你的框架引入对应插件，比如Vue项目用vue插件
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://apiadvisor.climatempo.com.br/api/v1',
        changeOrigin: true, // 模拟请求来自目标服务器的域名，避免服务器拒绝
        rewrite: (path) => path.replace(/^\/api/, '') // 移除/api前缀，转发到目标地址
      }
    }
  }
})

3. 调整API调用代码

由于baseURL已改为/api，调用代码无需修改路径，保持原有的接口路径即可：

const handleSearch = async () => {
  setIsLoading(true);
  try {
    const response = await api.get(
      `/locale/city?name=${city}&token=02f4d93d43de2aced8cf31cd80a791e9`
    );
    setResults(response.data); // response.data已自动解析，无需额外await
  } catch (error) {
    console.error(error); // 用console.error更便于排查错误
  } finally {
    setIsLoading(false);
  }
};

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

• 移除错误请求头后，浏览器发送的请求符合服务器的预检要求，不会触发拦截。
• Vite代理通过同源请求规避了浏览器的CORS检查：浏览器向http://localhost:5173/api发请求（同源），Vite服务器将请求转发到第三方API，服务器之间的请求不受CORS限制，最终将结果返回给前端。

内容的提问来源于stack exchange，提问作者Cláudio Vitor Dantas