Nginx 托管 React 应用并加 Basic Auth 的核心是正确处理 SPA 路由与启用 HTTP 认证：需用 try_files $uri $uri/ /index.html 回退路由，root 指向构建目录，并配置 auth_basic 与 .htpasswd；静态资源应单独放行避免 401，API 请求可通过 location /api/ 反向代理。
用 Nginx 托管 React 应用并加 Basic Auth，核心是两件事：一是让 Nginx 正确服务单页应用（SPA）的路由，二是对整个站点或特定路径启用 HTTP Basic 认证。配置不复杂，但几个关键点容易出错。
确保 React 路由在 Nginx 中正常工作
React Router 等前端路由依赖 History API，用户直接访问 /dashboard 时，Nginx 默认会尝试找对应文件，结果返回 404。必须把所有非静态资源请求回退到 index.html。
在 Nginx 配置的 location / 块中加入：
- 使用
try_files $uri $uri/ /index.html;—— 这是关键，优先匹配真实文件，最后兜底到 index.html - 确保
root指向 React 构建输出目录（如/var/www/my-react-app） - 添加
index index.html;明确默认索引文件
启用 Basic Auth 保护整个应用
Basic Auth 是最轻量的 HTTP 认证方式，适合内部预览或简单权限控制。它不加密凭据（仅 Base64 编码），务必配合 HTTPS 使用。
步骤如下：
- 生成密码文件：运行
htpasswd -c /etc/nginx/.htpasswd username（首次创建），后续添加用户去掉-c - 在 server 或 location 块中添加：
auth_basic "Restricted Access";auth_basic_user_file /etc/nginx/.htpasswd; - 注意路径权限：确保 Nginx 工作进程（如 www-data）有读取
.htpasswd的权限
绕过 Basic Auth 服务静态资源（可选但推荐）
如果对 /static、/assets 或图标等资源也加认证，可能影响加载性能或导致资源 401。建议单独放行：
- 在
location /外，添加一个更具体的 location，比如：location ^~ /static/ { auth_basic off; } - 或者放行常见静态后缀：
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2|ttf)$ { auth_basic off; } - 注意：这些 location 必须写在带
auth_basic的块之前，否则会被继承
处理 React 的 API 请求代理问题
开发时常用 proxy 配置转发 API 请求，但生产环境通常需 Nginx 代为转发。若后端 API 和 React 同域，可统一用 Nginx 反向代理：
- 例如将
/api/开头的请求转给 Node.js 服务：location /api/ { proxy_pass http://127.0.0.1:3001/; } - 确保
proxy_pass末尾有/，避免路径重复（如/api/users→http://…/users） - Basic Auth 默认不作用于
proxy_pass的后端，如需后端再鉴权，需另行配置
