Google Drive API Picker表现异常

如何解决Google Drive API Picker表现异常

我正在开发一个需要访问Google Drive API的React应用程序。 我的基本设置正确（API密钥，客户端ID，应用程序ID等）

我可以打开oauth对话框并登​​录（可以获得Oauth令牌），然后运行一个打开选择器的函数。

这是我的问题： 我制作了只有HTML基本页面的第一个版本，即使出现这些错误（这似乎是经常发生的），选择器也能很好地工作

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

Invalid 'x-frame-options' header encountered when loading ...

POST https://docs.google.com/picker/logImpressions 400

但是现在在我的React应用程序中，选择器已打开，我可以单击所有文件但是，单击“保存”，“取消”不会触发任何操作。如果我尝试使用过滤器选项或关闭选择器，则同样。 您是否知道会导致这种情况的原因？

我的代码： 反应

<ButtonCustom onClick={()=>loadGoogleDrive(this.state.channel,this.onSuccess)}>Importer depuis Gdrive</ButtonCustom>

和loadGoogleDrive函数：

    var developerKey = 'here goes my api key';

    // The Client ID obtained from the Google Api Console. Replace with your own Client ID.
    var clientId = 'here goes my client id';
    
    // Replace with your own project number from console.developers.google.com.
    // See "Project number" under "IAM & Admin" > "Settings"
    var appId = 'here goes my app id';
    console.log(developerKey,clientId,appId)
    // Scope to use to access user's Drive items.
    var scope = ['https://www.googleapis.com/auth/drive.readonly'];
    
    var pickerApiLoaded = false;
    var oauthToken;
    
    // Use the Google Api Loader script to load the google.picker script.
    function loadPicker() {
        if(oauthToken){
            gapi.load('picker',{'callback': onPickerApiLoad});
    
        }
        else{
            gapi.load('auth',{'callback': onAuthApiLoad});
    
        }
       
    }
    
    function onAuthApiLoad() {
        gapi.auth.authorize(
            {
                'client_id': clientId,'scope': scope,'immediate': false
            },handleAuthResult);
    }
    
    function onPickerApiLoad() {
        pickerApiLoaded = true;
        createPicker();
    }
    
    function handleAuthResult(authResult) {
        gapi.load('picker',{'callback': onPickerApiLoad});
        if (authResult && !authResult.error) {
            oauthToken = authResult.access_token;
            createPicker();
        }
    }
    
    // Create and render a Picker object for searching images.
    function createPicker() {
        if (pickerApiLoaded && oauthToken) {
            var view = new window.google.picker.View(window.google.picker.ViewId.DOCS);
            view.setMimeTypes("image/png,image/jpeg,image/jpg,application/json,application/vnd.google-apps.document");
            // MimeTypes a ajouter/modifier selon les besoins
            var picker = new window.google.picker.PickerBuilder()
                //   .enableFeature(google.picker.Feature.NAV_HIDDEN) Permet de cacher le bouton UPLOAD
                .enableFeature(window.google.picker.Feature.MULTISELECT_ENABLED)
                .setAppId(appId)
                .setoAuthToken(oauthToken)
                .addView(view)
                
                //.addView(new google.picker.DocsuploadView())
                .setDeveloperKey(developerKey)
                .setCallback(pickerCallback)
                .build();
            picker.setVisible(true);
        }
    }
    
    
    
    // A simple callback implementation.
    function pickerCallback(data) {
        console.log('datas',data)
        if(data.docs){
            importCallback(data.docs,'googledrive',{'oauthToken' : oauthToken});
        }
        
            

    } 

    loadPicker();
    
    
    
}

Here's a picture from the bug,i can click on the pictures but not on anything else 对不起，模糊效果我无法分享图片。

谢谢，如果您需要更多信息，我们将很乐意为您提供帮助 （对不起，我的英语不好）