在Vite(React)中用Axios调用TMDB API遇CORS错误求助

问题根源 #

• 请求头里添加Access-Control-Allow-Origin: *无效，这个头是服务器返回给客户端的响应头，客户端发送请求时携带它没有任何作用。
• Axios配置中Authorization字段拼写错误（写成了Autherization），会导致TMDB无法正确识别认证信息，间接影响请求合法性。
• 浏览器同源策略限制：本地http://127.0.0.1:5173与TMDB的https://api.themoviedb.org属于不同源，直接前端请求会被浏览器拦截。

正确解决步骤 #

1. 修正Axios配置错误 #

修复认证头拼写，调整请求格式适配TMDB API：

import axios from "axios";

const BASE_URL = "/api"; // 改为代理路径，配合后续Vite代理配置
const TMDB_TOKEN = import.meta.env.VITE_APP_TMDB_TOKEN;

const headers = {
  Authorization: `Bearer ${TMDB_TOKEN}`, // 修正拼写，Bearer与token间加空格
  "Content-Type": "application/json", // TMDB API接受JSON格式，无需text/plain
};

export const fetchDataFromApi = async (url, params) => {
  try {
    const { data } = await axios.get(BASE_URL + url, {
      headers,
      params,
    });
    return data;
  } catch (error) {
    console.log(error);
    return error;
  }
};

2. 配置Vite本地代理 #

在项目根目录的vite.config.js（或vite.config.ts）中添加代理规则，让Vite转发请求规避同源限制：

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

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'https://api.themoviedb.org/3',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '') // 去除/api前缀，匹配TMDB的实际路径
      }
    }
  }
})

3. 重启开发服务器 #

修改配置后必须重启Vite本地服务，代理规则才会生效。之后再调用API就不会触发CORS错误了。

为什么Postman能正常请求？ #

Postman是独立客户端工具，不受浏览器同源策略的限制，因此可以直接发起跨域请求。

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