Не удалось получить POST без заголовка в заголовке

При таком запросе:

return fetch(
            'http://localhost:8000/login',
            {   method: 'POST',
                headers: new Headers(
                   {"Content-Type": "application/json",
                    "Accept":"application/json"}
                ),

                body: JSON.stringify(
                   {'name': 'Tom', 'password': 'Soyer'}
                )
             }
           ).then( response => { console.log(response);})
            .catch(err => console.log(err))

запрос выполняется с помощью метода OPTIONS вместо POST. Только в режиме добавления: запрос "no-cors" становится POST:

return fetch(
            'http://localhost:8000/login',
            {   method: 'POST',
                mode: 'no-cors',
                headers: new Headers(
                   {"Content-Type": "application/json",
                    "Accept":"application/json"}
                ),
                body: JSON.stringify(
                   {'name': 'Tom', 'password': 'Soyer'}
                )
             }
           ).then( response => { console.log(response);})
            .catch(err => console.log(err))

но ответ не одобрен (даже если статус ответа сети равен 200): {type: "opaque", url: "", status: 0, ok: false, statusText: ""...} Я полагаю, это потому, что

Единственными допустимыми значениями для заголовка Content-Type являются: application/x-www-form-urlencoded multipart/form-data text/plain

описано здесь https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Может ли какой-либо способ привести данные POST json с извлечением?

Ответ 1

Пользовательский заголовок Content-Type который вы отправляете, заставляет запросить предварительный запрос, что означает, что запрос OPTIONS, содержащий некоторые метаданные о запросе POST, который должен быть отправлен, будет отправлен до фактического запроса POST.

Ваш сервер должен быть готов к работе с этим запросом OPTIONS. Вы не указали, на каком сервере написано, но, например, с помощью выражения, вы можете зарегистрировать промежуточное программное обеспечение, которое перехватывает все запросы "OPTIONS", устанавливает Access-Control-Allow-Origin: * и Access-Control-Allow-Headers: Content-Type Заголовки Access-Control-Allow-Headers: Content-Type, и отвечает 200.

Если вы можете сделать запрос, используя заголовок "Content-Type": "text/plain", это решит вашу проблему. В качестве альтернативы вы можете использовать что-то, что полностью обходит XHR, например JSONP.

Ответ 2

При использовании non-cors все заголовки должны быть действительными simple-headers. Единственные допустимые значения для заголовка content-type который квалифицируется как простой заголовок:

headers: [
  ['Content-Type', 'application/x-www-form-urlencoded'],
  ['Content-Type', 'multipart/form-data'],
  ['Content-Type', 'text/plain'],
]

Исключения с непредвиденными обстоятельствами:

headers: [
  ['Content-Type', 'application/csp-report'],
  ['Content-Type', 'application/expect-ct-report+json'],
  ['Content-Type', 'application/xss-auditor-report'],
  ['Content-Type', 'application/ocsp-request'],
]