React项目部署GitHub Pages后API请求域名被替换的问题求助

问题根源 #

你代码里的API请求用了相对路径（比如/api/v1/profile），部署到GitHub Pages后，浏览器会自动将请求的域名替换为当前页面的域名（https://username.github.io），导致请求错误返回404。

解决方案 #

方法一：直接使用完整API绝对路径 #

• 修改代码中所有API请求的路径，把相对路径替换成完整的绝对路径，例如：
  把

  fetch('/api/v1/profile')
  

  改成

  fetch('https://domain/api/v1/profile')
  

• 注意：如果API服务器开启了CORS，需要确保服务器允许https://username.github.io这个域名发起跨域请求，否则会出现跨域错误。

方法二：用环境变量配置API地址（推荐，更灵活） #

• 在项目根目录创建两个文件：
  • .env（本地开发环境使用）：

    REACT_APP_API_BASE_URL=http://localhost:你的本地API端口/api/v1
    

  • .env.production（GitHub Pages生产环境使用）：

    REACT_APP_API_BASE_URL=https://domain/api/v1
    

• 代码中通过环境变量拼接请求路径：

  fetch(`${process.env.REACT_APP_API_BASE_URL}/profile`)
  

• 注意：环境变量必须以REACT_APP_开头，create-react-app才会将其注入到构建后的代码中。

方法三：本地开发代理（仅适配本地，生产环境无效） #

这个方法仅用于本地开发时解决跨域问题，部署到GitHub Pages后不生效：

• 在项目的package.json中添加代理配置：

  "proxy": "https://domain/api/v1"
  

• 本地开发时，相对路径的请求会被代理到目标API，但生产环境仍需使用前面两种方法配置绝对路径。

额外注意：CORS配置 #

如果API服务器未配置允许https://username.github.io的跨域请求，即使路径正确，浏览器也会拦截请求。此时需要在API服务器端添加CORS配置，例如设置响应头：

Access-Control-Allow-Origin: https://username.github.io

（生产环境不建议设置为*允许所有域，存在安全风险）

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