部署在子域名的React应用生产环境数据请求失败求助

核心原因分析 #

• API URL配置错误：本地开发时用http://localhost:8000/blogs/指向本地API服务，但生产环境下该地址在Hostinger服务器环境中无效——生产API服务不在用户本地运行，必须使用公网可访问的地址。
• CORS跨域限制：若React子域名与API服务域名不同，浏览器的同源策略会阻止跨域请求，导致数据请求失败。
• 静态JSON文件路径问题：如果数据存储在本地data/db.json，部署后可能存在路径映射错误，或服务器未开放该文件的访问权限。

具体解决方法 #

1. 修正API URL配置 #

不要硬编码固定URL，根据环境自动切换：

// 区分开发/生产环境的API地址
const API_URL = process.env.NODE_ENV === 'production' 
  ? 'https://你的生产API公网地址/blogs/' 
  : 'http://localhost:8000/blogs/';

• 先验证生产API地址的可访问性：直接在浏览器输入该地址，确认能返回正常的JSON数据。

2. 解决CORS问题 #

• 若使用json-server托管JSON数据，启动服务时添加CORS支持：

  json-server --watch data/db.json --host 0.0.0.0 --port 你的端口号 --cors
  

• 若API部署在Hostinger，可在控制面板给API所在域名添加CORS规则，允许React子域名的请求，例如设置响应头：Access-Control-Allow-Origin: https://你的React子域名。

3. 静态JSON文件的正确部署 #

如果是直接读取本地JSON文件，将db.json移动到React项目的public目录下，使用相对路径访问：

const API_URL = '/db.json';

• 部署时确保public/db.json被正确上传到Hostinger服务器，且服务器未限制该文件的访问权限。

额外排查步骤 #

• 打开浏览器开发者工具（F12），切换到Network标签，查看失败请求的错误详情（如404、CORS报错、500等），快速定位问题。
• 确认Hostinger服务器防火墙未阻止API使用的端口（建议生产环境使用80/443端口，或在Hostinger后台开放对应端口）。

内容的提问来源于stack exchange，提问作者Muhammad Omer Baig