React调用MetaWeather API配置proxy后仍报CORS跨域错误求助

1 核心原因定位 #

你遇到的CORS错误本质是两个问题叠加导致的：

• MainWeather组件的useEffect未做有效值判断，初始渲染时woeid为null，会直接发送无效请求/api/location/null，MetaWeather的错误响应未携带CORS头，触发跨域报错。注释掉MainWeather后不会触发这个无效请求，因此LocationSearch的正常请求可以成功。
• package.json中的proxy配置仅在Create React App本地开发服务器生效，部署到生产环境后会失效，需要额外配置平台级反向代理。

2 代码修复 #

修改MainWeather.jsx中的useEffect逻辑，增加woeid有效值判断，同时修复温度数据叠加的bug：

useEffect(() => {
  // 仅当woeid为有效值时才发送请求
  if (!woeid) return
  axios
    .get("/api/location/" + woeid)
    .then((res) => {
      setLoad(true);
      const currentWeather = res.data.consolidated_weather[0]
      setIcon(currentWeather.weather_state_abbr);
      // 直接赋值当前城市温度，不要叠加旧数据
      setTemp([
        currentWeather.the_temp,
        currentWeather.min_temp,
        currentWeather.max_temp,
        currentWeather.weather_state_name,
      ]);
    })
    .catch((err) => {
      console.log(err);
    });
}, [woeid]);

3 生产环境反向代理配置 #

Netlify部署配置 #

在项目根目录新建名为_redirects的文件，写入以下规则：

/api/*  https://www.metaweather.com/api/:splat  200

打包部署时把这个文件放到构建输出的根目录即可，Netlify会自动识别该规则，将所有/api开头的请求转发到MetaWeather接口，自动处理跨域问题。

其他平台部署通用逻辑 #

如果部署到其他平台，配置对应平台的重定向规则即可，核心逻辑是把所有/api前缀的请求反向代理到https://www.metaweather.com/api对应路径，无需依赖第三方CORS中转服务。

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