У меня есть приложение react, созданное НЕ через create-react-app, а с webpack config. Когда я в своем приложении React делаю запрос c помощью fetch на localhost:8000/api/muggers (сервер уже создан с помощью node):
fetch("http://localhost:8000/api/muggers", param)
.then(response => response.json())
.then(json => console.log(json))
, то вылезает такая ошибка:
Access to fetch at 'localhost:8000/api/muggers' from origin 'localhost:8080' 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.
Но если я передам в fetch еще объект аргументов такой:
const param = {
method: 'GET',
mode: 'no-cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer: token',
"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Credentials" : true
},
};
То привычная надоевшая ошибка сменится такой:
item.js?2f47:29 Uncaught (in promise) SyntaxError: Unexpected end of input
at eval (item.js?2f47:29)
указывающей мне на фрагмент кода
response.json()
Я долго мучился и всякое разное делал. Если я в своем приложении использую сервер для тестовых данных - jsonplaceholder.typicode.com, то все работает отлично. Но если я использую другой сервер для тестовых данных - swapi.co , то опять все то же что и описал выше (ошибка вылезает). Но я помню что когда я пробовал swapi.co в моем приложении react созданным через create-react-app то все работало. И если же делать запрос на сервер node в приложении через CRA, то все будет опять же классно. И возможно получается что проблема в моем config, вот он:
Ну что мне сделать чтобы ошибки не было? И данные выводились нормально.