API контактов Google из браузера заблокирован политикой CORS - PullRequest
Новая
       55

API контактов Google из браузера заблокирован политикой CORS

0 голосов
/ 20 ноября 2018

У меня возникают проблемы при отправке запроса на API контактов Google из моего браузера в среде разработки.

Я пытаюсь запросить фид контактов из моего веб-приложения, размещенного на https://localhost:3001, с помощьюотправка XHR-запроса на https://www.google.com/m8/feeds/contacts/default/thin?alt=json&access_token=MYTOKEN&max-results=5000&v=3.0

Ранее мы использовали JSONP для выполнения этого запроса (как предлагалось на различных других справочных форумах), но недавно эта ошибка начиналась с этой ошибки: 

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.

Я понимаю, что теперь это происходит с ошибкой, поскольку браузер проверяет mimetype ответа и, поскольку это не application/javascript, он не должен оцениваться как сценарий, и поэтому JSONP не работает.Мы пытались запросить application/javascript, но похоже, что API не даст нам ответ с этим mimetype.

Теперь мы пытаемся очистить наш акт, но мы сталкиваемся с проблемой CORS, котораяЯ полагаю, это причина, по которой весь Интернет в первую очередь говорит друг другу использовать JSONP.

Когда мы пытаемся сделать запрос без JSONP, мы получаем эту ошибку 

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.

Однако в глубине форума поддержки Google кто-то предложил использовать googleapis.com вместо google.com.Как жаворонок, мы попробовали это, и это действительно работает.Моя проблема сейчас в том, что я понятия не имею, почему это работает или будет продолжать работать.В документах не упоминается использование этого нового хоста - они упоминают URL googleapis.com в качестве области OAuth только для чтения, но это кажется касательным к этой проблеме.Является ли googleapis.com действительно новым именем хоста, которое мы должны использовать для получения контактов из браузера?

РЕДАКТИРОВАТЬ: Включая код, который делает запрос 

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)

РЕДАКТИРОВАТЬ: Включая заголовки запроса назапрос опций CORS preflight, который мой браузер отправляет по какой-то причине: 

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

1 Ответ

0 голосов
/ 21 ноября 2018

Благодаря комментариям @sideshowbarker мы выяснили, что у нас есть jQuery ajaxPrefilter, настроенный для добавления заголовка x-csrf-token к любому междоменному запросу ajax.Это приводило к тому, что браузер отправлял запрос CORS preflight OPTIONS, который не удался.

В нашем случае источником заголовка x-csrf-token была зависимость, называемая ember-cli-rails-addon, которая добавляет x-csrf-токен для всех запросов.Существует PR для этого проекта здесь , который решает эту проблему.

...