React Http axios 获取发送到 Flask 的请求 服务器到达时没有添加到其标头中的 jwt

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
      })