CODEWITHSUNDEEP
next.jsaxiosfastapirequest-headersfastapi-middleware
shijie xu
shijie xu

Reputation: 2097

Interceptors.request unable to add a request header

I have a react nextJS project, and the following code:

import axios from "axios";
import config  from '@/app/settings/config';

import { configConsumerProps } from "antd/es/config-provider";

export const instance = axios.create({
    baseURL: 'localhost:8000',
    timeout: 20000,
});
console.log(`Axios instance created with baseURL: ${instance.defaults.baseURL} and the config.host:  ${config.host}` );
instance.interceptors.request.use( httpRequestConfig => {
    //if login...
    httpRequestConfig.headers['userId'] = '1'
    //    httpRequestConfig.headers.common['userId'] = '1' => result: (TypeError: Cannot set properties of undefined (setting 'userId'))


    return httpRequestConfig 
}, err => {
    Promise.reject(err)
})
;

  export default instance;

////THen in ansother place calls this code:  
import instance from "@/lib/axios";

export default function Projects() {

 useEffect(() => {
    searchProjects(1)
  }, []);

  const searchProjects = (index: number, name?: string)=>{
    instance.post('/api/v2/project/search', {
      page_size: 20,
      page: index,
      // ...(config.debug ? { user_id: 1 } : {}),
      ...(name ? { name } : {}), 
    }).then((res)=>{
      
    })
  }
}

Meanwhile, I setup a python FastAPI app with middleware, with purpose of parsing userId from request header.

from fastapi import Request
from fastapi import FastAPI, Request, status
from fastapi import applications
from starlette.middleware.base import BaseHTTPMiddleware
from fastapi.responses import JSONResponse

class UserIdValidationMiddleware(BaseHTTPMiddleware):
    async def dispatch(self, request: Request, call_next):
        try:
            # Get user_id from header
            header_user_id = request.headers.get("UserId")
            if not header_user_id:
                return JSONResponse(
                    status_code=400,
                    content={"code": 400, "message": "Missing user_id in request headers", "data": None}
                )
   response = await call_next(request)
   return response


# Then in another file
app = FastAPI(
    openapi_url="/openapi.json",
    docs_url="/docs",
    title="Orchestrator API",
    description="Backend API for Chana Orchestrator",
    version="1.0.0"
)


origins = [
    "http://localhost:3000",
    "http://127.0.0.1:3000",
    "http://0.0.0.0:3000",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
app.add_middleware(UserIdValidationMiddleware)

I set breakpoint in the python request.headers.get("UserId") using curl to verify the this Middleware works.

For react nextJS project, I also set a breakpoint in httpRequestConfig.headers['userId'] = '1' to verify the header is already set. But this time, the python server indicates the userId does not exist in the header. The request header it receives is：

[(b'host', b'localhost:8000'), 
(b'connection', b'keep-alive'),
 (b'pragma', b'no-cache'), 
(b'cache-control', b'no-cache'), 
(b'accept', b'*/*'), 
(b'access-control-request-method', b'POST'),
 (b'access-control-request-headers', b'content-type,satoken,userid,xxxxx,yyy'), 
(b'origin', b'http://localhost:3000'), 
(b'user-agent', b'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36'), 
(b'sec-fetch-mode', b'cors'), 
(b'sec-fetch-site', b'same-site'), 
(b'sec-fetch-dest', b'empty'),
 (b'referer', b'http://localhost:3000/'), 
(b'accept-encoding', b'gzip, deflate, br, zstd'), 
(b'accept-language', b'en-GB,en-US;q=0.9,en;q=0.8')]

So what's the problem in the react nextJS instance setup?

Upvotes: 1

Views: 40

Answers (1)

shijie xu
shijie xu

Reputation: 2097

Finally, this issue is fixed after reading CORSMiddleware not work and it is related to CORS. It is not on the axios side. The order of adding middleware should be

app.add_middleware(UserIdValidationMiddleware)
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

If the order is reversed, then none of customized request headers could be obtained in UserIdValidationMiddleware

Upvotes: 1

Related Questions