Cors block с API Яндекс.Расписание

Вопрос-ответ JavaScript
1

Пишу приложение на Vue.
Зарегистрировал аккаунт разраба в Яндекс, успешно получил api ключ, работаю с API Яндекс.Расписание.
Отправляю запрос через postman - все работает.

Если обращаться к API через vue-resource, блочат cors’ы, выдает примерно такое:
Access to XMLHttpRequest at ‘https://api.rasp.yandex.net/v3.0/’ from origin ‘http://localhost:8080’ 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.

В итоге, как мне обратиться с localhost’а к внешнему API?

2

Не закапываясь в причины, можно установить расширение для хрома которое подставит Access-Control-Allow-Origin заголовок в ответ сервера: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

3

спасибо, иду дальше, теперь response не показывает в консоли, выдает warning
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://api.rasp.yandex.net/v3.0/schedule/?station=s9600213 with MIME type application/json.

4

Покажи скриншот деталей запроса из вкладки network

5

31
Снимок экрана 2019-04-25 в 22.28.31.png2026×972 123 KB

6

Чтобы запрос точно был успешным, нужно указать ключ от апи яндекса среди параметров. Возможно из-за него не получается прочитать ответ (потому что без этого ключа сервер мне отдает 400 в ответ за GET запрос).

В остальном не вижу где проблема. Если после использования ключей проблема повторится, то пиши, будем копать дальше.

7

боюсь дело не в этом, согласно документации Яндекса, он все равно должен показать в response error.text = “Не указан ключ”, можно убедиться здесь: https://api.rasp.yandex.net/v3.0/schedule/

8

и возратил бы 400 ошибку, мне прилетает 200

9

Я получил 400 ошибку когда делал GET запрос. Для OPTIONS запроса у меня такое же поведение как и у тебя. Поэтому все таки грешу на проблему с ключом.

Проверял таким кодом:

async function f() {
	var r = await fetch('https://api.rasp.yandex.net/v3.0/schedule/?station=s9600213', {
		// method: 'GET'
		method: 'OPTIONS'
	})
	var j = await r.text()
	console.log(j)
}
f()
10

до этого был api ключ в заголовке, сейчас отправил его в параметры, тоже самое - response пустой

54
Снимок экрана 2019-04-25 в 22.59.54.png1988×1026 222 KB

11

Получилось воспроизвести (завел ключ для себя).

Пошерстил, рекомендуют по-особому запускать хром с отключенными проверками безопасности.

Проблема что ты наблюдаешь, появилась в недавней 73 версии хрома, поэтому я с ней не сталкивался раньше.

1 лайк
12

Яндекс содержимое response показал?

13

Я не уловил контекст, поэтому отвечу полностью.

Я получил ситуацию такую же как и у тебя. Почитал про ошибку, узнал что она появилась из-за ограничений что хром начал накладывать на расширения. Увидел что код расширения, которым я пользовался, не обновлялся с 15 года. Нашёл альтернативные решения (много где упоминается подход с флагами)

Не пробовал запускать хром с флагами. И уже не за компом.

14

в любом случае, решение верно, спасибо большое за помощь! Данные от API приходят, все норм.
В итоге, решение для MacOS, запустить при помощи консоли chrome:
open -a Google\ Chrome --args --disable-web-security --user-data-dir
заранее установив расширение https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en1

1 лайк