部署至GitHub Pages后Fetch请求URL异常致数据获取失败求助

我帮你分析下，这个问题其实很常见——本地环境和GitHub Pages的部署环境有个关键差异：GitHub Pages会把你的仓库名称（也就是这里的"Favourite-Beers"）作为URL的前缀，而你本地开发时没有这个前缀，导致相对路径的Fetch请求被错误拼接了。

核心原因 #

你在actions里的Fetch请求应该用了相对路径（比如fetch('/v2/beers')），本地开发时，这个路径会被解析为http://localhost:3000/v2/beers，如果配置了proxy的话会正确转发到api.punkapi.com。但部署到GitHub Pages后，你的应用域名是https://yourusername.github.io/Favourite-Beers/，此时相对路径/v2/beers会被错误解析，浏览器会把仓库名"Favourite-Beers"拼接到API路径里，就出现了你看到的api.punkapi.com/v2/beers/Favourite-Beers这种无效请求。

具体解决方案 #

1. 把Fetch请求改为绝对路径

直接在Fetch里使用API的完整URL，不要用相对路径，这样不管部署在哪里，请求都会直接指向正确的API服务器：

// 替换之前的相对路径写法
fetch('https://api.punkapi.com/v2/beers')
  .then(response => response.json())
  .then(data => { /* 处理数据逻辑 */ })
  .catch(error => { /* 错误处理逻辑 */ });

2. 配置create-react-app的homepage字段

在你的package.json里添加homepage字段，指向你的GitHub Pages地址，这会让build后的静态资源路径更准确：

"homepage": "https://yourusername.github.io/Favourite-Beers/"

3. 给react-router的BrowserRouter添加basename

如果你用了BrowserRouter，需要给它加上basename属性匹配仓库名称，避免路由跳转和路径解析混乱：

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter basename="/Favourite-Beers">
  {/* 你的路由组件内容 */}
</BrowserRouter>

额外提示 #

如果你本地开发时用了package.json里的proxy配置转发API请求，那部署到GitHub Pages后这个配置是无效的——GitHub Pages只托管静态文件，没有服务器端代理能力，所以必须直接请求API的完整地址，不能依赖本地proxy。

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