Не удалось выполнить «postMessage» в «DOMWindow»: указанное целевое происхождение («https://docs.google.com») не соответствует происхождению окна получателя.

Я пытаюсь разрешить пользователям выбирать файлы со своего диска Google с помощью средства выбора Google. Я следовал [официальным] [1] документам/примеру. Но получаю следующие ошибки в консоли браузера:

  • Не удалось выполнить 'postMessage' в 'DOMWindow': указанный целевой источник ('https://docs.google.com') не соответствует источнику окна получателя ('http://localhost:54255 ').
  • Недопустимый заголовок X-Frame-Options при загрузке https://docs.google.com/picker?protocol=gadgets&origin=http%3A%2F%2Flocalhost%3A54255&navHidden=true&multiselectEnabled=true&oauth_token=ya29 .A0AfH6SMCtkE8tfNq1NwGKP79vthQbMqKyt1kJnEubzvC03aio5bVoMO2jg8g8uJdKSiZez03lVgbN8TlICK-X05KdVtlsmsL2TRMjbTwav7xI0OFg7JGQwzd9V6TGHpF44AZNwHNp9IwbRTEMjuTD04yVAF0D & developerKey = AIzaSyBNvieCkOMLwVGgv1rXPOxfbZxUGBdDRkY & HOSTID = локальный & родитель = HTTP% 3A% 2F% 2Flocalhost% 3A54255% 2Ffavicon.ico & нав = ((% 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& ThirdParty=true#rpctoken=twmqtupitwug': 'РАЗРЕШИТЬ -FROM http://localhost:54255' не является признанной директивой. Заголовок будет проигнорирован.

При настройке в консоли разработчика Google я сделал следующее:

  • Включен API Google Picker в консоли Google 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


person Hammad Ahmed    schedule 24.02.2021    source источник
comment
Это может быть связано с тем, что ваш локальный хост обслуживается через http, возможно, попробуйте вручную вставить адрес как адрес https - см. stackoverflow.com/q/27573017   -  person iansedano    schedule 25.02.2021
comment
Спасибо за ответ @iansedano, я также пытался выполнить развертывание на работающем HTTPS-сайте, но безуспешно.   -  person Hammad Ahmed    schedule 25.02.2021
comment
Хм, вы вставили свой адрес локального хоста в авторизованные источники JavaScript в облачной консоли при создании идентификатора клиента? cloud.google.com/compute/docs/tutorials/javascript-guide   -  person iansedano    schedule 25.02.2021
comment
@iansedano Да, я добавил адрес локального хоста в авторизованные источники JavaScript и адреса перенаправления.   -  person Hammad Ahmed    schedule 25.02.2021


Ответы (1)


Это зарегистрированная ошибка

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

person iansedano    schedule 25.02.2021
comment
установка домена через .setOrigin не работает, я получаю ту же ошибку. Не удалось выполнить «postMessage» в «DOMWindow»: предоставлено целевое происхождение ('docs.google.com') не соответствует происхождению окна получателя. - person Hammad Ahmed; 25.02.2021
comment
также я получаю Невозможно прочитать свойство 'host' of undefined при попытке console.log(google.script.host.origin); Я что-то пропустил? - person Hammad Ahmed; 25.02.2021
comment
@HammadAhmed Может попробовать порт 8000? Я только что прошел быстрый запуск, и у меня он работал на порту 8000 без https или чего-то еще. Когда вы пытаетесь, вы получаете экран входа в систему? Вы размещаете это на html-странице, верно? - person iansedano; 26.02.2021
comment
Все еще возникает эта проблема после развертывания на HTTPS, не знаю, как порт 8000 может помочь в реальной среде. Да, я получаю экран входа в систему, и также появляется диалоговое окно, но также появляется эта ошибка в консоли. - person Hammad Ahmed; 26.02.2021
comment
Ах, вы должны были упомянуть об этом в начале. Это ошибка, я отредактировал свой ответ. - person iansedano; 26.02.2021