3

I'm not sure how to describe the problem to its fullest, I'm already a week in playing with this and can't get it to work...

I have a FastAPI server running as Lambda connected to API Gateway

enter image description here

CORS is enabled in both FastAPI and API Gateway.

I have NextJS running on Amplify, the requests that NextJS is performing are working, but the requests on my client side do not and have a CORS error.

my API is api.example.com/api while App is example.com

What Iv'e tried:

  • Adding the following headers to each request "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'
  • Adding re-writes to make sort of a proxy
  • Using CORS chrome extension, still does not work

Signup route which is done by next and not the client works

enter image description here

yet request done by client

enter image description here

I've prob tried many more things in between, I'm just clueless

This is my code for creating Axios Instance (Removed the headers but it did not work with them also)

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 help is very very much appreciated

EDIT:

ERROR itself

enter image description here

The lambda does not seems to even get the requests that done by my client, only the ones from Nextjs backend.

It makes me think it's the API Gateway configuration or my client request headers configuration.

Also tried:

  • Adding Access-Control-Allow-Credentials header as true, on client, and API gateway.
  • Added for my FastAPI CORS middleware-specific set of origins with my https://example.com
Paz
  • 72
  • 6
  • Also tried to delete cache, remove cache in dev tools etc... – Paz Mar 22 '23 at 10:50
  • Does this answer your question? [FastAPI is not returning cookies to React frontend](https://stackoverflow.com/questions/73962743/fastapi-is-not-returning-cookies-to-react-frontend) – Chris Mar 22 '23 at 11:15
  • No, I tried to set up credentials as true and allow specific origins, both in the API gateway and in my FastAPI code.. – Paz Mar 22 '23 at 12:12
  • @Chris I've added more information :D thanks! – Paz Mar 22 '23 at 20:58
  • 1
    Before a POST a browser wil do an OPTION request (preflight request). Check if the CORS headers are included for OPTION requests with a tool like postman – n9iels Mar 22 '23 at 21:59
  • 1
    None of this is related to the client-side (and you definitely should not add any `Access-Control-*` headers to your requests). The error is literally telling you what the problem is; the response to the preflight request does not have `Access-Control-Allow-Credentials: true` – Phil Mar 22 '23 at 22:40
  • @Phil I do have it set up in API gateway, is there a special setup also in FastAPI that should be done? in the FastAPI console I don't see any response to the preflight request hence I think it get stopped in API gateway, and there in the settings I enabled CORS with credetials: true for my {proxy+} resource – Paz Mar 23 '23 at 06:57
  • @n9iels can you point out what exact headers to verify, I do see CORS headers given in the response. – Paz Mar 23 '23 at 07:00
  • methods to debug: try making the same request by postman via copying curl and importing it in postman see if you are able to make that request, if yes then please share your cors policy at server like allowed headers, origin, methods, credentials. check if you have option method added to your allowed methods. – Danish Hasan Mar 23 '23 at 11:07
  • @DanishHasan here are the headers - https://prnt.sc/Ct5-N5Oojf1- it seems the API Gateway does return the CORS – Paz Mar 23 '23 at 19:34
  • Also seem like options should return the Credentials header as configured in API Gateway https://prnt.sc/N9JsadV3O0UA I'm confused why it does not work. – Paz Mar 23 '23 at 19:45

1 Answers1

-1

Solved it, for anyone experiencing CORS issues with API Gateway and Access-Control-Allow-Credentials header, my Integration Request was of type Mock, so my configuration did not apply.

I was with an AWS expert (paid service) 40 min call and we missed it lmao, feels bad.

Paz
  • 72
  • 6