React Http axios get request that is sent to Flask Server arrives without jwt that was added to its headers

Question

I'm trying to fetch users data by sending an axios get request from a React client to a Flask server.

This is my the get request:

axios.get("http://10.0.0.14:5000/users")

and this the interceptor the request is going through right before it's sent to the server and is provided with thw JWT:

    axios.interceptors.request.use(req=>
    {
        
        req.headers['x-access-token']=authSvr.getToken()
        return req
    })

This is the part of Flask that's responsible for handling the jwt:

@app.before_request
def check_token():
    auth_bl=AuthBL()
    if "/auth" not in request.url:
        if request.headers and request.headers.get('x-access-token'):
            token = request.headers.get('x-access-token')
            
            exist = auth_bl.verify_token(token)
            if exist is None:
                return make_response({"error" : "Not authorized"},401)
        else:
            return make_response({"error" : "No token provided"},401)

For some reason when I print the request headers, like this print(request.headers) , this is what I see:

Access-Control-Request-Method: GET
Access-Control-Request-Headers: x-access-token
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
Sec-Fetch-Mode: cors
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate

and as you can see I don't have a x-access-token key, but rather, it was sent as a value of the key Access-Control-Request-Headers.

Does anyone have any idea how to fix this? Thanks

Answer 1

if you are using bearer token you may try this:

you can send your token via headers

const headers = { Authorization: `Bearer ${token}` };

axios.get("your api url", { headers })
     .then(response => {
        // on success code
      })
     .catch(error => {
         // on error code
      })