Javascript 如何从google drive api下载/获取图像并将其呈现在我的web应用程序上？

我的任务是让用户登录到他们的GoogleDrive，选择一个图像，并在我的web应用程序上呈现它。我可以将文件下载到本地机器上，也可以在我的应用程序上查看和渲染低质量的缩略图。然而，当我尝试渲染全尺寸图像时，我得到一个CORS no Access Control Allow Origin错误

一些正常工作和渲染的背景缩略图图像链接的域名中有一个lh3，而填充大小的图像的域名中有一个drive.google。我的同事建议使用一个express endpoint来解决这个问题，但我不知道express和Node.js，而其他人建议从google drive api获取一个blob文件，下载到服务器上，然后从服务器上传到web应用程序的前端

class GoogleDrive {

    constructor () {
        this.thumbID = new Map();
    }

    startImport (choice, renderThumb) {
        gapi.load('client:auth2', this.initClient.bind(this, choice, renderThumb));
    }

    async initClient (choice, renderThumb) {
        const CLIENT_ID = '###';
        const API_KEY = '###';
        const DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];
        const SCOPES = 'https://www.googleapis.com/auth/drive';
        await gapi.client.init({
            apiKey: API_KEY,
            clientId: CLIENT_ID,
            discoveryDocs: DISCOVERY_DOCS,
            scope: SCOPES
        })

        // Listen for sign-in state changes.
        gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus.bind(this, choice, renderThumb));

        // Handle the initial sign-in state.
        this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get(), choice, renderThumb);
    }

    updateSigninStatus (isSignedIn, choice, renderThumb) {
        if (isSignedIn) {
            this.getFiles(choice, renderThumb);
        } else {
            gapi.auth2.getAuthInstance().signIn();
        }
    }  

    handleSignOut () {
        gapi.auth2.getAuthInstance().signOut();
    }

    getFiles (choice, renderThumb) {
        let q = "";
        if (choice === 0) {
            q = "mimeType contains 'image/png'";
        } else {
            q = "mimeType = 'application/pdf'"
        } 
        gapi.client.drive.files.list({
            'pageSize': 10,
            'q':q,
            'fields': "files(id, name)"
        }).then(async (response) => {
            let files = response.result.files;
            if (files && files.length > 0) {
                for (let i = 0; i < files.length; i++) {
                    let file = files[i];;
                    let result = await gapi.client.drive.files.get({fileId: file.id, fields: '*'}); 
                    file.thumb = result.result.thumbnailLink;   
                    file.webView = result.result.webViewLink; 
                    this.thumbID.set(file.thumb, result.result);
                    renderThumb(file.thumb, file.webView, result.result.name);
                }
            } else {
                console.log('No files found.');
            }
        });
    }
}

module.exports = new GoogleDrive();

_onDrop (e) {
    eatEvent(e);
    let droppedFiles;
    if(e.dataTransfer.files.length){
      droppedFiles = e.dataTransfer.files;
    }else{
      droppedFiles = [e.dataTransfer.items[0].getAsString((url)=>
      {
        this.createBlob(url, e);
      })];
      return;
    }

  async createBlob (url, e){
    let result = GoogleDrive.thumbID.get(url);
    let file = await gapi.client.drive.files.get({
      fileId: result.id,
      alt: 'media'
    })
    this._processDroppedFiles(file, e.pageX, e.pageY);
   }

   _processDroppedFiles(droppedFiles, x = undefined, y = undefined) {
    if(DocumentData.isReadOnly) return;
    let files = droppedFiles;
    if (files.length === 0) {
      // show dialog: unsupported format
      System.emit(
        System.Types.SHOW_DIALOG,
        new ErrorDialog(
          ErrorDialog.ID.UPLOAD,
          f(Strings.UPLOAD_ERROR),
          f(Strings.UPLOAD_ONLY_IMAGES)
        )
      );
    } 
    else {
      System.emit(System.Types.START_LOADING);

      // only first file
      let firstFile = files;//[0];

        // a single image file
        this._uploadAndLoadImage(firstFile, firstFile.name)
        .then(obj => this._loadImage(obj, x, y))
        .then(()=> System.emit(System.Types.STOP_LOADING))
        .catch(e => {
          console.warn('upload failed');
          console.error(e);
          System.emit(System.Types.STOP_LOADING);
        });
      }     
    }
  }

---

你能提供你当前的脚本吗？当然，请删除您的个人信息。编辑帖子并添加代码！如果代码有点混乱，很抱歉。谢谢您的回复。您可以删除客户端ID和API密钥吗？这些是你的个人信息。如果你想使用thumbnailLink，需要使用fetch从链接下载图像。你能提供你当前的脚本吗？当然，请删除您的个人信息。编辑帖子并添加代码！如果代码有点混乱，很抱歉。谢谢您的回复。您可以删除客户端ID和API密钥吗？这些是您的个人信息。如果您想使用thumbnailLink，需要使用fetch从链接下载图像。