如何在Hostinger部署Angular项目并使用HTTP而非HTTPS调用API？

1. 修正环境配置 #

确保你的environment.prod.ts中接口地址指向正确的HTTP路径，直接包含/api/后缀避免拼接错误：

export const environment = {
  production: true,
  empresa: 'Title of page',
  blnOcultarWarnings: false,
  apiURL: "http://<public ip>:<port>/api/",
};

2. 关闭Hostinger的HTTPS强制跳转 #

Hostinger默认会强制将HTTP请求重定向到HTTPS，这会导致你的HTTP接口调用被自动转换，需按以下方式处理：

• 登录Hostinger后台，进入对应网站的管理面板，找到SSL/TLS设置，关闭HTTPS强制选项。
• 若需保留网站HTTPS访问仅放行接口HTTP请求，可修改网站根目录下的.htaccess文件，添加规则：

RewriteEngine On
# 仅对非/api/路径强制HTTPS
RewriteCond %{HTTPS} off
RewriteCond %{REQUEST_URI} !^/api/
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

3. 构建并部署Angular应用 #

执行生产环境构建命令生成部署包：

ng build --configuration production

将dist目录下的所有文件上传至Hostinger的public_html目录（或指定的网站根目录）。

4. 处理浏览器混合内容限制 #

若你的Angular应用通过HTTPS访问，但接口使用HTTP，浏览器会拦截混合内容，可通过以下方式解决：

• 在.htaccess中添加Content-Security-Policy头，允许指定的HTTP接口请求：

Header set Content-Security-Policy "connect-src 'self' http://<public ip>:<port>/api/;"

内容的提问来源于stack exchange，提问作者Paul de la Cruz