Обработка ответа - SyntaxError: Неожиданный конец ввода при использовании режима: 'no-cors'

Ответ 1

Вам необходимо удалить настройку mode: 'no-cors' из вашего запроса. Этот mode: 'no-cors' - это как раз и есть причина проблемы, с которой вы столкнулись.

mode: 'no-cors' запрос mode: 'no-cors' делает тип ответа opaque. Фрагмент журнала консоли в вопросе ясно показывает это. И opaque означает, что ваш код JavaScript не может видеть тело ответа или заголовки.

https://developer.mozilla.org/en-US/docs/Web/API/Request/mode объясняет:

no-cors - JavaScript может не иметь доступа ни к каким свойствам полученного Response

Поэтому эффект установки mode: 'no-cors' по сути, говорит браузерам: "Не позволяйте внешнему JavaScript-коду обращаться к телу или заголовкам ответа ни при каких обстоятельствах".

Я предполагаю, что вы устанавливаете mode: 'no-cors' для запроса, потому что ответ от http://localhost:8080/course не включает заголовок ответа Access-Control-Allow-Origin или потому что ваши браузеры делают запрос OPTIONS для http://localhost:8080 потому что ваш запрос вызывает предварительную проверку CORS.

Но установка mode: 'no-cors' не является решением этих проблем. Решением является либо:

• настройте сервер http://localhost:8080 для отправки заголовка ответа Access-Control-Allow-Origin и обработки запроса OPTIONS

• или настроить прокси-сервер CORS, используя код из https://github.com/Rob--W/cors-anywhere/ или что-то подобное (см. раздел Как использовать прокси-сервер CORS для обхода "Нет Access-Control-Allow-Origin" "проблемный раздел ответа в заголовке" Access-Control-Allow-Origin "отсутствует на запрашиваемом ресурсе - при попытке получить данные из REST API)

Ответ 2

В вашем then вы должны проверить, нормально ли ответ, прежде чем возвращать response.json:

.then(function (response) {
    if (!response.ok) {
        return Promise.reject('some reason');
    }

    return response.json();

})

Если вы хотите получить сообщение об ошибке в своем отвергнутом обещании, вы можете сделать что-то вроде:

.then(function (response) {
    if (!response.ok) {
       return response.text().then(result => Promise.reject(new Error(result)));
    }

    return response.json();
})

Ответ 3

Я знаю, что этот ответ может быть слишком запоздалым и мог быть решен, но у меня была та же самая проблема сегодня, и мне просто нужно было добавить ',' в конце хеша заголовков, и я перестал получать ошибку

export function addContacts(formData) {
  return(dispatch) => {
    dispatch({type: 'POSTING_CONTACTS'});
    console.log(formData)
    return fetch(uri, {
      method: 'POST',
      body: JSON.stringify({contact: {name: formData.name, phone_number: formData.phoneNumber}}),
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
    })
    .then(response => {
        return response.json()
      }).then(responseJSON => {
        console.log(responseJSON)
        return dispatch({type: 'ADD_CONTACT', payload: responseJSON});
      })
  }
}     

Ответ 4

Вы можете избежать проблемы с политикой CORS, добавив в заголовок php или другой конечной точки сервера строку:

<?php
header('Access-Control-Allow-Origin: *');
//or
header('Access-Control-Allow-Origin: http://example.com');

// Reading JSON POST using PHP
$json = file_get_contents('php://input');
$jsonObj = json_decode($json);

// Use $jsonObj
print_r($jsonObj->message);

...
// End php
?>

Модель рабочего кода выборки с запросом POST:

const data = {
        optPost: 'myAPI',
        message: 'We make a research of fetch'
    };
const endpoint = 'http://example.com/php/phpGetPost.php';

fetch(endpoint, {
    method: 'POST',
    body: JSON.stringify(data)
})
.then((resp) => resp.json())
.then(function(response) {
    console.info('fetch()', response);
    return response;
});

Ответ 5

Просто скопируйте следующий код и вставьте его в файл web.config под <system.webServer>.

<httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>