无法在“DOMWindow”上执行“postMessage”：提供的目标源“https://docs.google.com”与收件人窗口的源不匹配 这是一个报告的错误另一个相关的错误

编程问答 2022-05-24

问题描述

我正在尝试允许用户通过谷歌选择器从他们的谷歌驱动器中选择文件。我遵循了[官方][1] 文档/示例。但是在浏览器控制台中出现以下错误：

  • 无法在“DOMWindow”上执行“postMessage”：提供的目标来源（“https://docs.google.com”）与收件人不匹配 窗口的来源 ('http://localhost:54255').
  • 加载“https://docs.google.com/picker?protocol=gadgets&origin=http%3A%2F%2Flocalhost%3A54255&navHidden=true&multiselectEnabled=时遇到无效的“x-frame-options”标头真组oauth_token = ya29.A0AfH6SMCtkE8tfNq1NwGKP79vthQbMqKyt1kJnEubzvC03aio5bVoMO2jg8g8uJdKSiZez03lVgbN8TlICK-X05KdVtlsmsL2TRMjbTwav7xI0OFg7JGQwzd9V6TGHpF44AZNwHNp9IwbRTEMjuTD04yVAF0D＆DeveloperKey为= AIzaSyBNvieCkOMLwVGgv1rXPOxfbZxUGBdDRkY＆HOSTID =本地主机＆父= HTTP％3A％2F％2Flocalhost％3A54255％2Ffavicon.ico＆NAV =（（％22all％22％2Cnull％2C％7B％22mimeTypes％22％3A％22image％2Fpng％2Cimage %2Fjpeg%2Cimage%2Fjpg%22%7D)%2C(%22upload%22%2Cnull%2C%7B%22query%22%3A%22docs%22%7D))&rpcService=civfhwizsis7&rpctoken=twmqtupitwug&thirdr ： 'ALLOW-FROM http://localhost:54255' 不是公认的指令。 标题将被忽略。

我在 google 开发者控制台上进行了设置：

  • 在 Google Api 控制台中启用 Google Picker API
  • 已创建 API 密钥
  • 创建 OAuth 客户端

我也尝试部署我的应用程序，但仍然出现相同的错误。

这是我正在使用的代码：

var developerKey = 'xxxxxxxYYYYYYYY-12345678';

var clientId = "1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com"

var appId = "1234567890";

var scope = ['https://www.googleapis.com/auth/drive.file'];

var pickerApiLoaded = false;
var oauthToken;

function loadPicker() {
  gapi.load('auth',{'callback': onAuthApiLoad});
  gapi.load('picker',{'callback': onPickerApiLoad});
}

function onAuthApiLoad() {
  window.gapi.auth.authorize(
      {
        'client_id': clientId,'scope': scope,'immediate': false
      },handleAuthResult);
}

function onPickerApiLoad() {
  pickerApiLoaded = true;
  createPicker();
}

function handleAuthResult(authResult) {
  if (authResult && !authResult.error) {
    oauthToken = authResult.access_token;
    createPicker();
  }
}

function createPicker() {
  if (pickerApiLoaded && oauthToken) {
    var view = new google.picker.View(google.picker.ViewId.DOCS);
    view.setMimeTypes("image/png,image/jpeg,image/jpg");
    var picker = new google.picker.PickerBuilder()
        .enableFeature(google.picker.Feature.NAV_HIDDEN)
        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setAppId(appId)
        .setoAuthToken(oauthToken)
        .addView(view)
        .addView(new google.picker.DocsuploadView())
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();
     picker.setVisible(true);
  }
}

function pickerCallback(data) {
  if (data.action == google.picker.Action.PICKED) {
    var fileId = data.docs[0].id;
    alert('The user selected: ' + fileId);
  }
}

我做错了什么吗？ [1]：https://developers.google.com/picker/docs

解决方法

这是一个报告的错误

https://issuetracker.google.com/177046274

我会去为这些问题加注星标，让 Google 知道它们会影响到您。

我可以重现它，选择器可以工作，但出现此错误：

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('http://localhost:8000').

另一个相关的错误

在相关说明中，如果您想在选择器中显示缩略图，则需要使用更广泛的 drive.readonly 或 drive 范围：

https://issuetracker.google.com/64622983

google-apigoogle-pickerjavascript