AWS Cognito自定义页面配置后访问显示空白页问题求助

刚配置完自定义页面却碰到空白？我之前也踩过类似的坑，咱们一步步来揪出问题所在：

1. 先检查自定义HTML的核心结构 #

• 可别忘了Cognito要求的必填挂载节点：页面里必须有个带id="aws-cognito-form"的div，Cognito的SDK要靠这个节点渲染表单，没它的话页面直接空白没跑。
• 还要确认你引入了必备的Cognito脚本，比如：

  <script src="https://assets.cognito.microsoft.com/sdk/js/aws-cognito-sdk.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/amazon-cognito-identity-js@6.3.3/dist/amazon-cognito-identity-js.min.js"></script>
  

  版本别太老，不然可能和当前Cognito的API不兼容。

2. 验证自定义域名的配置是否到位 #

• 去ACM（AWS证书管理器）看看，你的自定义域名绑定的证书是不是在us-east-1区域？Cognito的认证端点只认这个区域的证书，证书无效或者没关联的话，浏览器会偷偷阻止资源加载，页面自然就空白了。
• 再切回Cognito控制台的域名选项卡，确认自定义域名显示“已激活”，没有红色的错误提示。

3. 打开浏览器控制台看报错（最关键！） #

• 按F12打开开发者工具，切到Console标签，这里绝对能找到线索：
  • 要是看到CORS错误：那就是你自定义页面里引用的外部CSS/JS资源，没允许Cognito域名访问，得调整这些资源的CORS策略。
  • 要是有404错误：检查下你页面里的资源路径，相对路径在Cognito的部署环境里可能找不到文件，试试用绝对路径。
  • 要是有JS语法报错：那肯定是你自定义脚本里写错东西了，比如漏了引号、标签没闭合，把错误修了就行。

4. 核对Cognito用户池的页面设置 #

• 去App integration -> App client settings里看看，你是不是已经启用了对应的自定义页面（比如登录、注册），而且选对了App client？别犯了选错客户端的低级错误。
• 再去Customization -> Custom pages里检查，每个页面的HTML内容是不是完整的？别不小心清空了，或者粘贴的时候带了多余的格式符号。

5. 用默认页面做对比测试 #

• 暂时把自定义页面切换回Cognito的默认模板，访问默认的Cognito域名（比如https://<user-pool-id>.auth.us-east-1.amazoncognito.com/），如果默认页面能正常显示，那问题肯定出在你的自定义代码里，不用怀疑Cognito的基础配置。

6. 检查内容安全策略（CSP） #

• 要是你给自定义页面加了CSP头，得确保允许加载Cognito的相关资源，比如https://assets.cognito.microsoft.com、https://cdn.jsdelivr.net这些域名，不然浏览器会把必要的脚本给拦了，页面就空白了。

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