метод fetch() не отправляет заголовки?

Я посылаю пост запрос от браузера:

fetch(serverEndpoint, {
    method: 'POST',
    mode: 'no-cors', // this is to prevent browser from sending 'OPTIONS' method request first
    redirect: 'follow',
    headers: new Headers({
            'Content-Type': 'text/plain',
            'X-My-Custom-Header': 'value-v',
            'Authorization': 'Bearer ' + token,
    }),
    body: companyName
})

к тому времени, когда запрос достигает моего бэк-энда, он не содержит X-My-Custom-Header, ни

29
cors fetch-api http javascript post

4 ответов

на политика того же происхождения ограничивает типы запросов, которые Веб-страница может отправлять ресурсам из другого источника.

на no-cors режим, браузер ограничен отправкой "простых" запросов - тех, кто с safelisted методов и safelisted заголовки только.

для отправки запроса с заголовками типа Authorization и X-My-Custom-Header, вы должны бросить no-cors запросы режима и поддержки preflight (OPTIONS).

различие между "простыми" и "не простых" запросов по историческим причинам. Веб-страницы всегда могут выполнять некоторые запросы кросс-происхождения с помощью различных средств (таких как создание и отправка формы), поэтому, когда веб-браузеры ввели принципиальное средство отправки запросов кросс-происхождения (совместное использование ресурсов cross-origin, или CORS), было решено, что такие "простые" запросы могут быть освобождены от предполетного OPTIONS проверка.

45

во-первых: используйте объект вместо new Headers(..):

fetch('www.example.net', {
  method: 'POST',
  headers: {
    'Content-Type': 'text/plain',
    'X-My-Custom-Header': 'value-v',
    'Authorization': 'Bearer ' + token,
  }
});

во-вторых: хорошо знать, заголовки в нижнем регистре fetch!!

Thridly : no-cors mode ограничьте использование заголовков в этом белом списке:

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type и значение которого ( application/x-www-form-urlencoded, multipart/form-data, text/plain )

вот почему только ваш Content-Type заголовок отправляется, а не X-My-Custom-Header или Authorization.

3

вы можете попробовать это?

fetch(serverEndpoint, {  
  credentials: 'include'  
})

Ref. https://developers.google.com/web/updates/2015/03/introduction-to-fetch#sending_credentials_with_a_fetch_request

2

1st:при вызове заголовков в экспорте.createCompany функция, у вас есть let headers = ['Headers: '] с уставным капиталом H вместо строчных h что может вызвать ошибки. у вас также есть запятая после токена в заголовках, которых не должно быть.

2nd: каждый раз, когда я использовал запросы fetch в react native,header: не нужны new Headers на нем.

попробуйте это: fetch(serverEndpoint, { method: 'POST', mode: 'no-cors', redirect: 'follow', headers:{ 'Content-Type': 'text/plain', 'X-My-Custom-Header': 'value-v', 'Authorization': 'Bearer ' + token }, body: companyName })

0