React应用API请求403：误用CloudFront域名作为API基础URL

你的API请求返回403完全是因为axios的API基础URL错误指向了CloudFront分发域名，导致请求被发送到CloudFront而非实际的API服务器。CloudFront仅配置了S3静态资源的源，无法处理你的API请求，因此返回禁止访问。

具体修复步骤 #

• 找到你的axios配置文件（通常是axios.js或类似的API封装文件），检查基础URL的设置
• 将原本错误使用的CloudFront域名替换为真实的API服务器地址https://[my_api_url]
• 示例修正：

  // 错误配置（可能用了当前页面域名，导致CloudFront环境下出错）
  const api = axios.create({
    baseURL: window.location.origin, // 这里在CloudFront域名下会变成https://[my_cf_distribution_link]
  });
  
  // 正确配置
  const api = axios.create({
    baseURL: 'https://[my_api_url]', // 直接指定API服务器地址
  });
  

问题根源分析 #

• 当你通过S3静态托管域名访问站点时，axios的基础URL可能刚好匹配了API地址（或你的配置在该环境下正确），所以登录功能正常
• 切换到CloudFront域名后，若你的API基础URL是动态获取当前页面域名（比如window.location.origin），就会错误把CloudFront域名当作API前缀，导致请求路径变为https://[my_cf_distribution_link]/[my_api_url]/login，而CloudFront没有对应API路径的源配置，直接返回403

额外说明 #

你尝试修改CloudFront的查看器协议行为等设置无效，是因为问题根源不在CloudFront的分发规则，而是前端API请求的地址配置错误。你的S3桶策略和CloudFront源访问设置是正常的——毕竟静态站点内容能正常加载，只是API请求发错了地址。

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