部署在Hostinger的Angular应用路由404及HTTP请求失效问题求助

一、直接输入路由返回404的解决方法 #

Angular是单页应用（SPA），前端路由由浏览器端处理，服务器默认无法识别这些自定义路径，必须配置规则将所有路由请求转发到index.html。

针对Apache服务器（Hostinger多数主机默认使用） #

1. 在Angular打包后的dist目录中创建.htaccess文件，写入以下规则：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

2. 将包含.htaccess的整个dist目录文件上传到Hostinger的网站根目录（通常是public_html文件夹）。
3. 确认Hostinger主机已开启mod_rewrite模块，一般默认启用，若未开启可在cPanel的「Apache Modules」中找到并启用。

针对Nginx服务器（少数Hostinger主机配置） #

需修改站点的Nginx配置（可联系Hostinger客服协助操作，或自行通过面板编辑），在站点配置块中添加：

location / {
  try_files $uri $uri/ /index.html;
}

二、Hostinger上无法发起HTTP请求的解决方法 #

1. 修复混合内容拦截 #

如果你的Hostinger站点启用了HTTPS（当前多数主机强制开启），但API请求使用HTTP协议，浏览器会拦截混合内容。解决方式：

• 将API地址替换为HTTPS协议（需API服务支持）；
• 临时关闭Hostinger面板中的「Force HTTPS」选项（仅测试用，生产环境不推荐）。

2. 配置API跨域（CORS） #

若API部署在第三方服务器，需确保API的响应头允许你的Hostinger域名访问。例如在API端添加响应头：

Access-Control-Allow-Origin: https://你的Hostinger域名.com

测试阶段可临时允许所有域名（生产环境禁用）：

Access-Control-Allow-Origin: *

3. 核对API请求地址 #

确保Angular代码中API请求使用完整绝对路径，而非本地开发时的相对路径。比如将/api/user改为https://你的API域名.com/api/user。

4. 排查Hostinger防火墙拦截 #

Hostinger主机内置防火墙可能拦截API请求，可在cPanel的「Firewall」或「Security」板块查看拦截日志，或临时关闭防火墙测试（测试后务必重新开启）。

5. 验证API服务可用性 #

先在浏览器直接访问API地址，确认能正常返回数据。若API本身不可用，Angular的请求自然会失败。

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