GoDaddy托管Angular7站点直接访问特定URL报404错误如何解决

这是Angular单页应用（SPA）的典型服务器路由配置缺失问题。Angular采用客户端侧路由实现：从首页点击导航跳转时，全程不会向服务器请求对应路径的页面文件，由Angular在浏览器端直接替换页面内容、更新地址栏路径，因此流程正常；但直接在地址栏输入内页URL、或刷新内页时，浏览器会直接向服务器请求对应路径的资源，服务器默认会去站点根目录寻找路径匹配的实体文件/文件夹，找不到就返回404错误。

根据你在GoDaddy上的部署方式二选一操作即可： #

场景1：Angular编译后的静态文件部署在cPanel虚拟主机目录（绝大多数个人用户的部署方式） #

Angular7默认使用PathLocationStrategy路由策略（URL不带#号），需要通过Apache重写规则把所有不存在实体文件的请求全部转发到index.html，交给Angular路由处理：

• 在本地Angular项目编译输出目录（ng build --prod执行后生成的dist文件夹，和index.html同层级）新建名为.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>

• 将.htaccess和所有编译产物一起上传到GoDaddy站点根目录（通常为public_html文件夹）。如果本地Windows系统无法直接新建点开头的文件，可以先任意命名，上传到GoDaddy文件管理器后再重命名为.htaccess。
• 清空浏览器缓存、GoDaddy主机缓存，若开启了CDN同步清空CDN缓存后即可正常访问。
  如果编译Angular时指定了非根路径的baseHref，需要对应修改RewriteBase的值，和baseHref保持一致即可。

场景2：通过GoDaddy Node.js托管服务运行全栈应用，Angular静态资源由Node服务直接提供 #

这种场景不需要配置.htaccess，只需要在Node服务中添加路由兜底规则，把非接口、非静态资源的请求全部转发到Angular的index.html即可。
如果使用Express框架，参考以下配置调整服务代码：

const express = require('express');
const path = require('path');
const app = express();

// 托管Angular静态资源，路径替换为你实际的编译产物存放路径
app.use(express.static(path.join(__dirname, 'dist/your-project-folder')));

// 原有后端接口路由，例如所有/api开头的请求走后端逻辑
app.use('/api', require('./routes/api'));

// 兜底路由：所有未匹配的GET请求统一返回index.html，交给前端路由处理
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/your-project-folder/index.html'));
});

// 原有服务启动逻辑
app.listen(process.env.PORT || 3000);

调整完成后重启Node服务，清空缓存即可生效。

• 不建议为了快速解决问题将Angular路由切换为HashLocationStrategy（URL会带/#/片段），该模式对搜索引擎爬取不友好，也不符合常规URL使用习惯，优先调整服务器配置为标准方案。
• 若开启了GoDaddy自带的安全加速、CDN服务，配置修改后必须清空节点缓存，否则规则可能延迟数小时才会生效。

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