Ytukyg

I am having some trouble making request to the Google Contacts API from my browser in a development environment.

I am trying to request the contacts feed from my web app hosted at https://localhost:3001 by making an XHR request to https://www.google.com/m8/feeds/contacts/default/thin?alt=json&access_token=MYTOKEN&max-results=5000&v=3.0

We had previously been using JSONP to make this request (as was suggested in various other help forums), but this recently started failing with this error:

Refused to execute script from 'https://www.google.com/m8/feeds/contacts/default/thin?alt=json&access_token=MYTOKEN&max-results=5000&v=3.0&callback=jQuery33107099178438653957_1542737952472&_=1542737952473' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

I understand that this is now failing because the browser is checking the mimetype of the response and because it is not application/javascript, it is not supposed to be evaluated as a script and therefore JSONP does not work. We have tried to ask for application/javascript but it seems like the API will not give us a response with that mimetype.

Now we are trying to clean up our act, but we are running into a CORS issue which I imagine is the reason the entire Internet has been telling each other to use JSONP in the first place.

When we try to make the request without JSONP, we get this error

Access to XMLHttpRequest at 'https://www.google.com/m8/feeds/contacts/default/thin?alt=json&access_token=MYTOKEN&max-results=5000&v=3.0' from origin 'https://localhost:3001' 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.

However, deep in a Google support forum, someone suggested using googleapis.com instead of google.com. As a lark, we tried it, and it does indeed work. My problem now is I have no idea why this works or it it will continue to work. The docs do not mention using this new host- they do mention a googleapis.com URL as a read-only OAuth scope, but that seems tangential to this issue. Is googleapis.com indeed the new hostname we should be using to get Contacts from a browser?

EDIT: Including the code that makes the request

const params = $.param({

  alt: 'json',

  access_token: 'MYTOKEN',

  'max-results': 5000,

  v: '3.0'

})

const url = `https://www.google.com/m8/feeds/contacts/default/thin?${params}` # when I change this to www.googleapis.com it works

$.get(url, responseHandler)

EDIT: Including the request headers on the CORS preflight OPTIONS request that my browser is sending for some reason:

Accept: text/html,application/xhtml+xm…plication/xml;q=0.9,*/*;q=0.8

Accept-Encoding: gzip, deflate, br

Accept-Language: en-US,en;q=0.5

Access-Control-Request-Headers: x-csrf-token

Access-Control-Request-Method: GET

Cache-Control: no-cache

Connection: keep-alive

Host: www.google.com

Origin: https://localhost:3001

Pragma: no-cache

User-Agent: Mozilla/5.0 (Macintosh; Intel …) Gecko/20100101 Firefox/63.0

Thanks to comments from @sideshowbarker, we figured out that we had a jQuery ajaxPrefilter configured to add a x-csrf-token header to any cross-domain ajax request. This was causing the browser to send the CORS preflight OPTIONS request which was failing.

In our case, the source of the x-csrf-token header was a dependency called ember-cli-rails-addon that adds x-csrf-token to all requests. There is a PR for that project here that fixes that issue.