Microsoft Edge中Google身份验证功能异常问题求助

问题详情 #

基于Django框架搭建的网站，点击「Continue With Google」按钮时：

• Chrome、Firefox可正常弹出Google账户选择窗口；
• 最新版Microsoft Edge中，弹窗为空白，无任何内容。

控制台在Chrome和Edge中均出现以下错误：

Failed to load resource: the server responded with a status of 400 ()
[GSI_LOGGER]: The given origin is not allowed for the given client ID.

排查方向与解决方案 #

1. OAuth客户端ID的Origin授权不完整 #

Chrome和Firefox对本地开发环境的origin校验有容错，但Edge严格遵循规则。需确认Google Cloud中OAuth客户端的配置：

• 登录Google Cloud控制台，找到对应的OAuth 2.0客户端ID；
• 检查「已授权的JavaScript来源」和「已授权的重定向URI」，确保同时添加了http://localhost:8000和http://127.0.0.1:8000；
• 保存配置后，重启本地服务，用http://127.0.0.1:8000访问网站测试。

2. Edge的隐私拦截设置 #

Edge默认的弹窗或Cookie拦截可能阻止了OAuth流程：

• 打开Edge设置 → 隐私、搜索和服务 → 网站权限 → 弹出窗口和重定向，将本地站点（localhost:8000或127.0.0.1:8000）加入允许列表；
• 进入「Cookie和网站权限」，确保允许第三方Cookie，或单独允许accounts.google.com的Cookie。

3. GSI脚本加载时序问题 #

异步加载GSI脚本可能在Edge中导致初始化异常：

• 尝试移除脚本的async defer属性，改为同步加载：

  <script src="https://accounts.google.com/gsi/client"></script>
  

• 清除Edge的浏览器缓存和Cookie后重新测试。

4. 本地Hosts解析异常 #

若localhost解析存在问题，Edge无法正确识别请求origin：

• 检查系统hosts文件，确保存在127.0.0.1 localhost的正确映射。

核心提示 #

尽管Chrome也显示origin错误，但它对本地环境有宽松处理，而Edge严格执行校验，所以优先完善OAuth客户端的origin授权配置是解决问题的关键。

内容的提问来源于stack exchange，提问作者Bob The Builder