Google App Engine与Google Cloud Function之间的CORS配置问题

问题根因 #

你遇到的CORS报错本质是鉴权失败导致的伪装跨域问题，并非你配置的跨域规则不生效：

• 你的GCF设置为仅私有访问，当GAE前端发起的请求没有携带GCF认可的身份凭证时，GCP前置网关会直接返回401/403错误。这个错误响应是网关层面生成的，不会走到你写的Express业务逻辑，自然不会带上你配置的Access-Control-Allow-Origin响应头，浏览器就会判定为跨域拦截。
• 你在GAE的app.yaml中添加的CORS头属于无效配置：CORS规则要求的是被请求的目标资源（也就是GCF接口）的响应带跨域头，GAE作为前端静态资源的服务端配置跨域头，对GCF接口的跨域校验没有任何作用。

之前配置的错误点 #

1. GCF侧的cors配置存在语法错误：你写的是app.use(cors(cors({ credentials: true, origin: true })))，重复调用了两次cors方法，正确写法为app.use(cors({ credentials: true, origin: true }))
2. 当开启credentials: true时，Access-Control-Allow-Origin不能设置为*，必须指定明确的允许源域名，浏览器会直接拒绝带凭证却允许所有源的跨域响应。

可选解决方案 #

方案1：保留GCF作为后端的原有架构 #

• 给GCF请求添加合法身份凭证：你的GAE受IAP保护，前端可以拿到IAP下发的身份令牌，请求GCF时在请求头携带Authorization: Bearer <令牌内容>
• 给GCF配置对应服务账号权限，允许IAP认证后的身份访问GCF实例
• 修正GCF侧的CORS配置，将origin改为你的GAE实际域名，不要重复调用cors方法

方案2：全部迁移到GAE（你最终选择的方案） #

该方案可以彻底规避私有GCF的鉴权和跨域问题：

• 可以将前端和后端部署为同一个GAE服务的不同路由，或者同一项目下的两个GAE服务，通过dispatch.yaml配置路由转发
• 同域部署不需要配置任何跨域规则，还可以直接复用IAP的身份认证逻辑，不需要额外处理服务间鉴权
• 也可以统一后端接口路径和前端静态资源路径，完全消除跨域场景

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