Как получить данные из api с помощью fetch?

Question

[run182]

Выполняю данный запрос:

var fetchOptions = {
			mode: 'no-cors'
		};
		
		fetch('http://localhost:3000/campaigns/contacted/, fetchOptions)
			.then(response => response.json())
			.then(data => { console.log(data) })
			.catch(error => console.error(error));

такой запрос возвращает SyntaxError: Unexpected end of input на строку .then(response => response.json()), если уберу fetchOptions, то возвращает ответ Access to fetch at 'localhost:3000/campaigns/contacted' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Comments

[Kovalsky]

Это репорт, ибо ошибка гуглится в секунду

[#ямыnginx]

Kovalsky, еще варианты?

[Kovalsky]

#ямыnginx, пока ничо больше не придумал

Answer 1

[Надим]

На хостинге в php файле пропишите разрешающий заголовок:

<?php
header('Access-Control-Allow-Origin: *');

// Ваш код

?>

Рекомендую к ознакомлению эту статью.

Comments

[Дима]

А если я размещаю на своем локальном сервере файл .json который открывается и доступен для чтения по адресу localhost/data.json, но ошибка такая же, не подскажете в чем может быть проблема?

[Надим]

Дима, очевидно, что ваш JSON не имеет разрешающего заголовка. Создайте php файл и уже через него отдавайте свои данные. Либо пропишите добавление заголовка Access-Control-Allow-Origin для всех файлов с форматом .json сразу в .htaccess

<FilesMatch «\.(json)$»>
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin «*»
</IfModule>
</FilesMatch>

P. S. Вообще, учитесь гуглить, поиск по запросу Access-Control-Allow-Origin выдал бы вам всю исчерпывающую информацию по теме.