CODEWITHSUNDEEP
jquerygoogle-drive-api
user3063821
user3063821

Reputation: 33

Access-Control-Allow-Origin error on Google Drive web site

I'm using Google Drive (https://googledrive.com/host/...) to host a very simple site for a kiosk. On this site, I'm using jQuery load() function to embed some content from a Google Drive document (https://docs.google.com/document/...). This has been working great... up until I just checked it today.

The site is no longer displaying the content from the document and is now throwing an error in the console:

XMLHttpRequest cannot load https://docs.google.com/document/d/1X1ZEtrGm8tnAvLIuzF4ch2dltVjIwQJl3Zn3bOLJS4s/pub. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://googledrive.com' is therefore not allowed access.

Can anyone please advise on why this was working... and now it isn't... and how I can get it working again?

Thank you for your assistance.

Upvotes: 2

Views: 4204

Answers (2)

Michael I
Michael I

Reputation: 307

@dsager provides a very good response and I believe, in many cases, his response will be the best fit solution for many individuals encountering this problem.

If anyone out there is using Flask/Python and doesn't want to bother with backend code, here's @dsager's backend solution adopted for Flask/Python (note that it uses the requests module):

import requests

@app.route('/get_google_doc', methods=['POST'])
def get_google_item():
  if (not request.json or not 'export_link' in request.json or not 'access_token' in request.json):
    abort(400)

  headers = { 'Authorization' : 'Bearer %s' % request.json['access_token'] }
  r = requests.get(request.json['export_link'], headers=headers)

  return jsonify({'status': 200, 'success': True, 'content': r.content})

Upvotes: 0

dsager
dsager

Reputation: 398

It seems that Google changed (or removed) the Access-Control-Allow-Origin header of documents recently. I used to get a document's meta info via the JS Google Drive SDK and then fetch the HTML content via jQuery using the provided export link and access token. This is not working any more.

I ended up implementing a web proxy in my application to which I pass the export link and access token.

In Rails (using the HTTParty gem) the controller action looks like this:

def get_google_doc
  response = HTTParty.get(
      params[:export_link],
      { headers: { 'Authorization' => 'Bearer ' + params[:access_token] } }
  )
  render(text: response.parsed_response)
end

And the JS request like this:

var request = jQuery.ajax({
    "url": "/get_google_doc",
    "type": "GET",
    "dataType": "html",
    "data": {
        "export_link": htmlExportLink,
        "access_token": accessToken
    }
});

You'll find more info on the topic here:

Upvotes: 2

Related Questions