'How to solve missing CORS headers when user defined headers provided?

Having troubles with providing Authorization header for requests:

const response = await fetch(url, {
        method: 'GET',
    });

This works properly, and request headers are:

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
DNT: 1
Host: localhost:8080
Origin: http://localhost:3000
Referer: http://localhost:3000/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="100", "Google Chrome";v="100"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Now if I want to make request with Authorization header in it like:

const response = await fetch(url, {
        method: 'GET',
        headers: {
            "Authorization": `Bearer ${tokenId}`,
        },
    });

Chrome network debug shows that I get problem with CORS. And google debug shows my request headers:

Authorization: Bearer token
DNT: 1
Referer: http://localhost:3000/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="100", "Google Chrome";v="100"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Missing these headers:

Host: localhost:8080
Origin: http://localhost:3000
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site

How should I do my requests with Authorization header? Or should I use other solutions, or fetch has some options to fix that ?

EDITED:

response headers looks like:

Access-Control-Allow-Origin: *
Content-Type: application/json; charset=utf-8
Date: Fri, 06 May 2022 15:31:52 GMT
Transfer-Encoding: chunked


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source