CODEWITHSUNDEEP
google-apigoogle-drive-api
Azeem Cv
Azeem Cv

Reputation: 101

CORS error when trying to open files from Google Drive v2 API

I am hosting a webapp at https://app.mindmapmaker.org

I use Google APIs to read and save files from Google Drive.

Goto My webapp. Then from the menu, it is called via menu, 'Document'->'Open'->'Open' (beneath Google Drive) and 'Document'->'Save As..'->'Save' (beneath Google Drive)

From last week onwards there is a problem opening file from Google Drive. There is no problem saving file.

When opening, I am getting this message in console log in Chrome browser:

Access to XMLHttpRequest at 'https://00e9e64bacb81ac463650ab754319d41f4469e8ae3f0d4efe7-apidata.googleusercontent.com/download/drive/v2/files/1TpPiniJUuVBgakcujo8TP-f-U8ovkHhb?qk=AD5uMEthpuLU3VV0nxYsl6lQ9J9tyL51LyZ0vo4HBJ1K8ubIinpwcXqIicmHanPDUUOp53WvBZYhjYFCHgjkSANG7WiX1Zs5tepeXqj-m5Pr8zM-5MPjiC67vKoq1D-yDGLuaP2wOSJEmlGjiGlafeE4Irr44qz9S9X4GZIf7YhJ2ze_Ls4YlgrFYUGzeYLhLVOgQfVz8Q6oP-WkLwHtAqbwpi9ZOeUxU_8CYliomPoaIZ3nuw_37IMiCkgSil90WXLm1bvmSrOaggJzIh40EbWoPem7lRr7Erquh6EZcOxFAAT4Ez8u-J2lCYYwAwlY8Y82-SNIeFSf8J9FrfKT3qCLsDrsb4ZJbb44TWWcyf8ZGWOM0J9Z-WvVvFAjnpjXU4WH0k-9YgNCgPmGtJ6M1Rnvv9x5xhDthyPB-29tHWU8wzMZTvfMucf0KfkiigHhLybZQdycXGBiDdMFlRv7RsA40S6jyJV6exeAjSUUCt8El0jkQhs877Bacps_XXTdr10WulNB-cjOXOU36hyOmr7k4f2Gzz51lJkt6WiiCGJMw3V-ILV-abaVCxo-ukH5fFVCvulvPqWtCNRJKtiVW5gHqnIVWss7ELtbpN68Z__KTeVl3P6eBDMDuhLtm2yjVq6qLEny_ygE_hWRIiX4ibK1JPv7X5X1vsKo4manbRsJ7GbmahxP4xeTZTXcOuT-SqzET4TRlzWwlQHtcEj1Su8Kpkp2VY2ZT5Twsp2afX5rIYNInlDoGQBLgf1zkH3iuSLcHx2bTf1Nklo01Z79Svx2ZTh0rb8dOAU0Q58x-ViNs0E0XdoKZ5W1v4tHiCObqYuIgjn7Aw3C2HsYwLR7HrNDuBcfqD3k4kWQzIqT21EZITZLrLl7X7wCNtPE7RrHfRb6KWR73v9Nh2CHLLOMg7Z5Gi3RkS6un2atfzy4xQamI9blpjwVe6kTPa5DbL6skYd6r26BRw98oA1rhqvxMNGeCxrmdSvpgdfgTc96Xa-41G1XaD_z5o-NeGrD2-Y7e9AjzReN2kkauTVYl6jcwn1V20oGu36Y0oW1MlnnPg363ZQ0Hd49htI' (redirected from 'https://content.googleapis.com/drive/v2/files/1TpPiniJUuVBgakcujo8TP-f-U8ovkHhb?key=AIzaSyAFn0-DGYnY1oOJ2pQfPpbc6zDeALMqmeg&alt=media&source=downloadUrl') from origin 'https://app.mindmapmaker.org' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

How to fix this? Any help would be appreciated. Do I need to modify anything at Google Console API?

I am using nginx server.

I already tried adding headers, like

location / {
    add_header Access-Control-Allow-Origin *;
}

But it is not working.

Please help.

Upvotes: 4

Views: 6028

Answers (1)

Azeem Cv
Azeem Cv

Reputation: 101

I found a solution finally. I don't know if it is temporary fix or permanent one.

I found the solution from https://developers.google.com/drive/api/v2/reference/files/get

In the download code, in Javascript, we use 

xhr.open('GET', file.downloadUrl);

Instead of file.downloadUrl we should use, 

downloadUrl = "https://www.googleapis.com/drive/v2/files/" + fileId; 
xhr.open('GET', downloadUrl);

Replace fileId with the fileId of the file from Google Drive.

You can view the demo at https://app.mindmapmaker.org There you can open a .json file from Google Drive.

You can see a demo in this website as well, http://mindmap.kwebpia.net/

Upvotes: 3

Related Questions