Missing Authorization Header when using fetch API

Question

Description:

I'm facing a peculiar issue with making a POST request to the /api/projects endpoint in my React application. The request includes the Authorization header with a valid bearer token (accessToken). However, when I execute the request using the fetch API in my React code, it returns:

{
  "msg": "Missing Authorization Header"
}

Strangely, the same request works very well in Postman, and it also worked for a similar project that I created in the past.

Code Snippet:

fetch("/api/projects", {
    method: "POST",
    headers: {
        Authorization: `Bearer ${accessToken}`,
        "Content-Type": "application/json",
    },
    body: JSON.stringify(formData),
})

Any insights or suggestions on why the same request works in Postman but fails in my React app would be greatly appreciated! Thank you!

Troubleshooting Steps:

1. Verified that the accessToken is not null or undefined.
2. Temporarily hardcoded the Authorization header to rule out issues with the accessToken.
3. Inspected the Network tab in the browser's developer tools to ensure the Authorization header is present.
4. Checked CORS headers and ensured they are correctly configured on the server side.
5. Explored the browser console for any additional error messages.