AWS S3部署React项目后接口GET返回404、登录功能失效如何解决？

问题拆分 #

你当前遇到的问题分为两类，分开排查不要混淆：

• 前端路由相关：访问/register、/login等路径能正常加载前端页面，说明你S3的index.html错误页配置、SPA路由回退规则已经生效，之前配置的CloudFront错误规则其实是正常工作的，不需要在这部分花时间。
• 接口请求相关：提交数据失败、控制台报404是独立的后端接口问题，和S3/CloudFront的前端托管配置无关。

接口404排查点 #

• 首先检查前端请求方法错误：你报错里显示是GET https://api.website.com/login 404，登录接口通常只允许POST请求，大概率是你前端代码里调用登录接口时把请求方法写错成了GET，改回POST即可。
• 确认接口域名配置正确：检查前端打包时的环境变量配置，有没有把API请求的根域名误写成前端站点的域名，导致请求打到了前端托管的S3/CloudFront上。
• 检查后端服务状态：确认api.website.com对应的后端服务、API网关运行正常，有没有近期的部署变更导致/login、/register等路由被误删，或者服务宕机。
• 核对跨域配置：检查后端服务的CORS规则，有没有允许你前端站点的域名跨域访问，有没有放行POST、OPTIONS类型的请求。

若主页加载直接返回Cannot GET /错误 #

请检查CloudFront的源站配置：

• 确认默认源站指向的是你的S3存储桶，不是后端接口服务
• 如果你配置了路径转发规则把/api开头的请求转到后端，确认规则的匹配优先级没有高过默认规则，没有把所有请求都误转发到后端服务。

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