I've been struggling with this issue for a week now and can't seem to fully describe it. I have a FastAPI server running as a Lambda connected to API Gateway.
https://i.stack.imgur.com/S5Zx9.png
Both FastAPI and API Gateway have CORS enabled, but I'm facing CORS errors on my client side while NextJS requests work fine.
The API endpoint is api.example.com/api, and the app is example.com.
Attempts Made:
- Tried adding specific headers to each request like
"Access-Control-Allow-Origin": '*', "Access-Control-Allow-Headers": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version", "Access-Control-Allow-Methods": 'GET, POST, PUT, DELETE, OPTIONS' - Attempted re-writes to create a proxy setup
- Used a CORS Chrome extension, but no luck
The signup route done by Next works, but the client requests do not.
https://i.stack.imgur.com/dErCf.png
Error in Client Requests:
https://i.stack.imgur.com/aqkav.png
I've tried several other things but nothing seems to work. This is the code for creating the Axios Instance (even without headers):
import axios from 'axios';
export const api = (session: any): any => {
const headers: { [key: string]: string | number } = {
"Accept": 'application/json',
}
if (session?.user) {
headers.Authorization = session.user.token;
}
const api = axios.create({
baseURL: process.env.NEXT_PUBLIC_API_DOMAIN,
withCredentials: true,
headers
});
return api;
};
Any assistance would be greatly appreciated.
EDIT:
Error Details:
https://i.stack.imgur.com/zZ394.png
The Lambda doesn't seem to receive requests from the client, only from the NextJS backend. It could be an issue with API Gateway configuration or client request headers setup.
Additional attempts made:
- Added
Access-Control-Allow-Credentialsheader as true on both client and API gateway. - Included a specific set of origins in my FastAPI CORS middleware with https://example.com