Custom headers are stripped from my request

Question

I'm trying to add a Authorization header to my get request from my react app to Spring boot back-end. I've tried both fetch and axios:

fetch('http://127.0.0.1:8080/api/tender', {
            method: 'GET',
            headers: {
                Authorization: 'Bearer' + token,
                'Access-Control-Allow-Origin': '*'
            }
        });

axios.defaults.headers.common['Authorization'] = 'Bearer' + token;
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
axios.get('http://127.0.0.1:8080/api/tender').then((res) => console.log(res));

My raw header viewed from devtools:

Host: 127.0.0.1:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0
Accept-Language: nb-NO,nb;q=0.9,no-NO;q=0.8,no;q=0.6,nn-NO;q=0.5,nn;q=0.4,en-US;q=0.3,en;q=0.1
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: GET
Access-Control-Request-Headers: access-control-allow-origin,authorization
Referer: http://localhost:3000/import
Origin: http://localhost:3000
DNT: 1
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: */*

Somehow my custom headers are removed before calling the api and I get the following error: Missing security token, please log in If I edit and resend the same reuqest adding Authorization to my header, the api reponds with 200

Edit:

Ignoring token validation for http Options method gives a 200 response. But my initial request never runs. I would expect my get-request to run as soon as the option method returns OK

The request headers shown in the question are for the CORS preflight OPTIONS request made by the browser automatically on its own, before attempting the GET request from your code. What the question shows is expected behavior. Browsers intentionally by design don’t include any headers in that preflight OPTIONS request other than the headers the browser sets on its own. As a consequence, that means the server the request is sent to must allow unauthenticated OPTIONS requests (without expecting an Authorization header or any other credentials). See https://stackoverflow.com/a/45406085/441757 — sideshowbarker, Dec 30 '19 at 10:17
By the way, remove `'Access-Control-Allow-Origin': '*'` from the headers object in your frontend code. That header is a response header only. Trying to set it as a request header will not help you. — sideshowbarker, Dec 30 '19 at 10:19
Shouldn't my initial get request run as soon as the options request returns ok? — Øystein Seel, Dec 30 '19 at 12:06
If the options request actually does return ok —with the right response headers — then yeah, the browser will your run get request. So if the browser isn’t running your get request, then that means the browser has determined the preflight didn’t succeed. That could be because the status code for the options response was an error code rather than a 200 OK success response, or it could be because the options response doesn’t have the headers the browser expects. So you look at the error messages the browser has logged in devtools console. And use the Network page to get the response status code — sideshowbarker, Dec 30 '19 at 12:28
I'm already getting a 200 OK success response after I removed the token validation for http options method. My get request still doesn't run — Øystein Seel, Dec 30 '19 at 12:33

score 0 · Answer 1 · answered Dec 30 '19 at 10:16

0

I'm not sure this will solve your problem but isn't a space missing after 'Bearer' ?

'Bearer'+token => 'Bearer '+token ?

answered Dec 30 '19 at 10:16

François Richard

6,817
10
43
78

There is no Authorization value in my request header. If the the token was included, my back-end would have returned a invalid not missing token error message – Øystein Seel Dec 30 '19 at 10:20

Øystein Seel · Accepted Answer · 2020-01-02T08:07:46.037

The preflight Options request wasn't handled properly in my Spring boot back-end .Turns out I was missing a cors configuration:

@EnableWebSecurity
@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .httpBasic().disable()
                .cors().configurationSource(request -> new CorsConfiguration().applyPermitDefaultValues())
                .and()
                .csrf().disable();
    }
}

This configuration solved the issue.

Custom headers are stripped from my request

2 Answers2