Сбой из-за C ontent S ecurity P olicy или CSP, который применяет политику для connect-src, которая ограничивает доменывы можете подключиться к WebSockets, EventSource и XHR (что и реализует fetch()).Ошибка, которую вы видите, говорит именно об этом, хотя, возможно, не самым понятным образом.
Что означает , что означает , это то, что на странице, где вы пытаетесь запустить этот код, естьэто либо тег <meta http-equiv="Content-Security-Policy" content="..."> где-то в <head>, либо запрос на ПОЛУЧЕНИЕ страницы имеет заголовок Content-Security-Policy.Кроме того, фактическая строка CSP будет иметь значение connect-src или некоторое значение, которое устанавливает connect-src, например default-src.Например, если вы видите connect-src 'self';, это будет означать, что вам запрещено / заблокировано использование fetch() с любым другим доменом, кроме сайта, на котором он работает (того же источника).
Используйте инспектор инструментов разработчика для поиска метатега и панель сетевых запросов для проверки заголовка.Единственное решение вашей проблемы - либо удалить, либо изменить этот тег / заголовок, чтобы разрешить подключение к домену router.project-osrm.org, либо путем явного добавления домена в качестве разрешенного домена, либо неявным образом путем разрешения подключения к любому домену.для content-src (более рискованно).
Для понимания того, как реализован CSP, пожалуйста, взгляните на страницу по основам веб-поиска Google по теме .Я также настоятельно рекомендую content-security-policy.com / в качестве краткого справочника.
Почему это работает в других местах?
Ваш код работает здесь в StackOverflow, потому что SO не имеет политики CSP connect-src.То же самое, когда вы пытаетесь сделать это в консоли вашего браузера на пустой вкладке или на большинстве сайтов.Тем не менее, я могу подделать его, чтобы доказать, что это проблема, слегка изменив свой фрагмент и вставив метатег CSP:
// Add CSP meta tag that will block cross-origin AJAX
var cspMetaTag = document.createElement('meta');
cspMetaTag.setAttribute('http-equiv', 'Content-Security-Policy');
cspMetaTag.setAttribute('content', "connect-src 'self';");
document.querySelector('head').appendChild(cspMetaTag);
fetch('http://router.project-osrm.org/trip/v1/driving/-43.20940000000002,-22.911;-48.84870000000001,-26.3045?overview=false')
.then(response => {
return response.json()
})
.then(data => {
// Work with JSON data here
console.log(data)
})
.catch(err => {
// Do something for an error here
console.log(err.toString());
});
Откройте консоль браузера при запуске приведенного выше фрагмента, чтобы увидеть фактическое сообщение о блокировке CSP в вашем браузере.