fetch () не надсилає заголовки?

Я надсилаю такий запит POST із браузера:

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ані Authorizationзаголовка.

Мій бек-енд - це функція Google Cloud для Firebase (в основному лише кінцева точка Node.js), яка виглядає так:

exports.createCompany = functions.https.onRequest((req, res) => {
    let headers = ['Headers: ']
    for (let header in req.headers) {
        headers.push(`${header} : ${req.headers[header]}`)
    }
    console.log(headers)
    ...
}

Журнал консолі цього Google Cloud для Firebase функції не містить X-My-Custom-Headerні Authorizationзаголовок.

Що не так?

Редагувати 1

Тож за допомогою інструментів розробника в Chrome перевірено, що ні браузер, X-My-Custom-Headerні Authorizationзаголовок не надсилаються ... Зараз питання: Чому? Як це виправити?

Редагувати 2

Більше інформації про мою програму: це програма React. У мене працівник служби з обмеженими можливостями. Я намагався створювати Requestта спеціально додавати заголовки за допомогою req.headers.append(). Заголовки все одно не надсилатимуть.

Політика того самого походження обмежує типи запитів, які веб-сторінка може надсилати до ресурсів іншого походження.

У цьому no-cors режимі браузер обмежується надсиланням "простих" запитів - лише тих, що мають безпечні методи та заголовки .

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

Різниця між "простими" та "не простими" запитами полягає в історичних причинах. Веб-сторінки завжди можуть виконувати деякі запити про перехресне походження за допомогою різних засобів (наприклад, створення та подання форми), тому, коли веб-браузери запровадили принциповий спосіб надсилання запитів про перехресне походження (спільне використання ресурсів або CORS), це було вирішив, що такі “прості” запити можуть бути звільнені від передпольотичної OPTIONSперевірки.

По-перше : Використовуйте об’єкт замість new Headers(..):

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

По-друге : корисно знати, заголовки мають нижній регістр fetch!!

По-третє : no-corsрежим обмежує використання заголовків цим білим списком:

• Accept
• Accept-Language
• Content-Language
• Content-Typeі чиє значення ( application/x-www-form-urlencoded, multipart/form-data, text/plain)

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

Чи можете ви спробувати це?

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

Посилання https://developers.google.com/web/updates/2015/03/introduction-to-fetch#sending_credentials_with_a_fetch_request

У мене теж була така сама проблема. Я вирішив це, видаливши "no-cors" з javascript і додавши наступне у весняному завантаженні на стороні сервера.

public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
        protected void configure(HttpSecurity httpSecurity) throws Exception {
             .antMatchers(HttpMethod.OPTIONS, "/**").permitAll()

        }
    }

По-перше: коли ви викликаєте заголовки у своїй функції export.createCompany, у вас є let headers = ['Headers: ']велика Hлітера, а не мала літера, hщо може спричинити помилки. у вас також є кома після маркера в заголовках, яких там не повинно бути.

2-е: кожного разу, коли я використовував запити на отримання в рідній реакції, 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
})