Map images in React application using google Drive and scripts

Question

I'm trying to create an album on my react website for a friend of mine, and I want the images inside the album to be connected to a google drive so that he can upload new images on his own.

I managed to add the script inside app scripts:

var filelinks = [];
var mimetypes = ["image/png","image/jpeg","image/gif","image/bmp"];

function doGet(e) {

  var fid;
  if(e.parameters.fid==undefined){
  fid='ID_OF_THE_GOOGLE_DRIVE_ALBUM';
  }  else {
    fid=e.parameters.fid[0];
  }
  var data = travseItems(fid);
  return   buildSuccessResponse(data, 1);
  
}


function travseItems(folderid){
 var folder = DriveApp.getFolderById(folderid);
 var files=folder.getFiles();  
  var x=0;
  
  while(files.hasNext()){
    
    var file = files.next();
    if( mimetypes.indexOf(file.getMimeType()) != -1){   
      var filelink ={};
      filelink['img_id']=file.getId();
      filelink['name']='';
      filelink['folder_id']='';
    
      console.log(filelink['img_id']+"---folder:"+filelink['folder_id']+"\n\n");
      filelinks.push(filelink);
    }

  }  //is file
 
  return filelinks;
}


function buildSuccessResponse(posts, pages) {
  var output = JSON.stringify({
    status: 'success',
    data: posts,
    pages: pages
  });
  
  return ContentService.createTextOutput(output).setMimeType(ContentService.MimeType.JSON);
}

When I click the link provided after creating the script I can see the array with all the images.

but when I try make the fetch call on my application I get an error saying:

... Access to fetch at 'THE_LINK_PROVIDED_BY_GOOGLE_API' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

this is the code inside my react app:

 const WEB_APP_URL = 'THE_LINK_PROVIDED_BY_GOOGLE_API'
    

    useEffect(() => {
        fetch(WEB_APP_URL)
            .then(response => response.json())
            .then(obj => {
                const list = obj.data;
                for (let i = 0; i < list.length; i++) {
                    const url_split = list[i].book_url.split('/d/');
                    const image_id = url_split[1].split('/view');
                    console.log(image_id[0]);
                }
            });
    }, [])

Any ideas on how to solve this?

Does this answer your question? [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) — jub0bs, Aug 11 '23 at 18:01
No, I'm not using any backend server for this project and the changes I made on the frontend that they mentioned in the link, doesn't remove the problem. Thanks though : ) — Rogestav, Aug 12 '23 at 06:49
If that Google API isn't configured for CORS, you'll have to consume using some kind of backend. The end. — jub0bs, Aug 12 '23 at 07:22

score -1 · Answer 1 · answered Aug 11 '23 at 15:09

From the error it looks like the problem is outside of your control, at least with this api link you're trying.

This Access-Control-Allow-Origin is usually set on the backend server. The error you got means your app domain doesn't have the permission to access the specified route.

You can try to use a plugin to bypass the CORS rule just to see the result. (https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf)

Map images in React application using google Drive and scripts

1 Answers1