使用JS的XHR请求访问IAP保护的Google App Engine资源遇401及CORS问题

我之前也碰到过一模一样的情况，核心原因其实是浏览器的跨域预检请求（OPTIONS）被IAP拦截了，和你手里的身份令牌本身没有关系，给你拆解下前因后果和解决办法：

为什么Postman/后端服务能正常访问？ #

Postman或者后端服务发起的请求不会触发浏览器的跨域预检机制，会直接把Authorization: Bearer <token>头带上，IAP能正常验证令牌所以直接放行。但浏览器发起跨域XHR请求时，会先自动发一个OPTIONS预检请求——这个请求是不带任何自定义头（包括你的Bearer令牌）的，IAP默认会校验所有请求的身份，所以直接返回了401；同时这个401响应里没有返回CORS所需的Access-Control-Allow-Origin等头，浏览器就抛出了你看到的CORS错误。

具体解决步骤 #

1. 给IAP添加OPTIONS请求的豁免规则 #

因为预检请求本身不涉及敏感操作，不需要身份验证，我们需要让IAP跳过对OPTIONS方法的校验：

• 打开Google Cloud控制台，进入「Identity-Aware Proxy」页面，找到你的App Engine资源
• 点击「添加豁免」，设置规则：
  • 资源：选择你的GAE服务或具体路径
  • 方法：勾选OPTIONS
  • 允许的用户：选择「所有用户」即可（预检请求本身无风险）
• 保存规则

2. 配置App Engine的CORS策略 #

接下来要让GAE返回正确的CORS响应头，处理跨域请求：

• 创建一个cors.json文件，内容如下（根据你的实际需求调整）：

  [
    {
      "origin": ["http://localhost:4200"],
      "method": ["GET", "OPTIONS"],
      "responseHeader": ["Authorization", "Accept", "X-Requested-With"],
      "allowCredentials": true,
      "maxAgeSeconds": 3600
    }
  ]
  

• 使用gcloud命令部署这个配置：

  gcloud app deploy cors.json
  

3. 调整XHR代码（可选优化） #

如果你的请求不需要携带Cookie之类的凭证，可以把xhr.withCredentials = true去掉；如果确实需要携带凭证，确保上面CORS配置里的allowCredentials设为true，同时前端域名必须是明确的（不能用*）。

这样调整后，浏览器的OPTIONS预检请求会被IAP放行，GAE返回正确的CORS头，之后带Bearer令牌的GET请求就能正常通过IAP验证了。

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