Google Picker setVisible抛出“Incorrect origin value”错误如何解决？

问题修复方案 #

你遇到的报错是Google Picker近期收紧origin校验规则导致的，核心错误为setOrigin参数配置错误，具体修复方式如下：

1. 修正Picker初始化代码 #

你当前错误地将setOrigin参数设置为https://docs.google.com，该参数需要填写你自身站点的根地址，直接使用动态获取的方式可避免硬编码适配不同环境，修正后的代码如下：

picker = new google.picker.PickerBuilder()
.addView(new google.picker.DocsUploadView().setIncludeFolders(true))
.setOAuthToken(token)
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
// 替换成你当前站点的origin，如果页面嵌套在iframe中请使用window.top获取顶层页面地址
.setOrigin(window.location.protocol + '//' + window.location.host)
.build();

如果你的页面嵌套在多层iframe内，需要按照报错提示取最顶层页面的地址：

.setOrigin(window.top.location.protocol + '//' + window.top.location.host)

2. 配套校验规则 #

• 确认Google Cloud控制台中Picker API的授权域名和你实际使用的站点域名完全匹配，协议（http/https）、端口（非标准端口场景）、域名前缀都要完全一致
• 不要给origin参数带多余的路径后缀，只保留协议://域名[:端口]部分即可

报错逻辑说明 #

• 你看到的CSP框架加载报错是因为传递了错误的origin值，触发了Google侧内容安全策略的拦截规则
• 最后一行RPC通信报错是因为你传递的origin和实际发起请求的站点origin不匹配，Google的跨域通信校验未通过

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