部署AWS S3的Angular应用Google授权重定向含/#/遭拒的解决咨询

一、切换Angular为HTML5路由模式 #

默认Angular使用哈希路由（带/#/），这是导致Google拒绝重定向URI的核心原因。改成HTML5模式即可去掉哈希：

• 在app-routing.module.ts中修改路由配置，关闭哈希模式：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 你的业务路由配置
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• 在项目根目录的index.html头部添加<base href="/">，确保路由解析正确：

<head>
  <base href="/">
  <!-- 其他meta标签、样式引入等 -->
</head>

二、配置AWS S3的404重定向规则 #

切换HTML5模式后，直接访问子路由（如/callback）会触发S3的404错误，因为S3无法识别前端路由。需要添加重定向规则适配：

1. 进入AWS控制台的目标S3存储桶
2. 打开「属性」标签页，找到「静态网站托管」配置项
3. 在「重定向规则」中填入以下XML内容：

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>my-website.s3-website-eu-west-1.amazonaws.com</HostName>
      <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

该规则会将所有404请求重定向到带哈希的路径，同时用户端显示的仍是无哈希的URL，既满足S3的静态托管要求，又适配Google的URI规则。

三、更新Google认证的重定向URI #

在Google Cloud控制台的OAuth 2.0客户端ID设置中，将「Authorized redirect URIs」更新为http://my-website.s3-website-eu-west-1.amazonaws.com/callback，这个无哈希的地址可以正常通过Google的校验。

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