如何在ReactJS中解决localhost:3000与TMDB API的CORS跨域问题

嘿，我刚碰到过一模一样的问题，马上帮你搞定！首先得搞清楚为什么会出现这个错误：

Access to XMLHttpRequest at 'https://api.themoviedb.org/3' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这个错误是浏览器的同源策略导致的——TMDB的API服务器没有把你的http://localhost:3000加入允许跨域的源列表，而且你在请求里加的Access-Control-Allow-Origin: *完全没用，这个响应头是服务器返回给浏览器的，不是客户端发的，先把这个多余的配置删掉！

下面给你三个可行的解决方法，按推荐程度排序：

方法一：用Create React App内置的代理（最简单！） #

如果你用的是Create React App搭建的项目，直接在根目录的package.json里加一行代理配置：

"proxy": "https://api.themoviedb.org/3"

然后修改你的axios.js，把baseURL改成相对路径：

// axios.js
import axios from "axios";
const instance = axios.create({
  baseURL: "/", // 改成相对路径，不用写完整的API地址了
})
export default instance;

重启你的React开发服务器，之后所有以/开头的请求都会被自动转发到https://api.themoviedb.org/3，浏览器会认为是同源请求，CORS问题直接消失！

方法二：自己搭个Node.js代理服务器（适合自定义需求） #

如果不想用CRA的内置代理，可以自己写个简单的Node中间层来转发请求：

1. 先安装依赖：

npm install express axios

2. 新建server.js文件：

const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 5000;

// 允许React本地服务跨域请求这个代理
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  next();
});

// 转发所有请求到TMDB API
app.get('*', async (req, res) => {
  try {
    const response = await axios.get(`https://api.themoviedb.org/3${req.url}`);
    res.json(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).json(error.response?.data || { message: '请求失败' });
  }
});

app.listen(PORT, () => console.log(`代理服务器跑在端口 ${PORT} 啦！`));

3. 启动代理服务器：

node server.js

4. 修改axios.js的baseURL为代理地址：

const instance = axios.create({
  baseURL: "http://localhost:5000",
})

这样所有请求都会通过你的代理服务器转发，绕开浏览器的CORS限制。

方法三：浏览器插件临时绕过（仅开发测试用！） #

如果你只是想快速测试接口，可以用Chrome的Allow CORS: Access-Control-Allow-Origin插件，开启后就能临时跳过浏览器的CORS检查。但注意：这个方法只能自己开发时用，绝对不能用于生产环境，也不能要求用户安装插件！

最后补充：生产环境的解决办法 #

等你部署React项目的时候，别用上面的开发代理了，直接在你的部署服务器（比如Nginx）上配置反向代理，把API请求转发到TMDB，这样也不会有跨域问题。

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