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?
