NGINX NextJS GraphQL same origin same port fetch calls show 502 Bad Gateway Error

Alright I’ve been completely stuck on this and need huge help quick.

What I’m trying to do:

• My domain: https://example.com (just a placeholder)
• NextJS App https://localhost:3000 (custom server with express)
• My GraphQL API https://localhost:3000/api/graphql (custom server with express)

The NextJS App and the GraphQL API is on the same NodeJS server. The routes actually work, the APIs also work.

The API works when:

• ✅ I use Postman and query from the graphql api. (I used https://hoppscotch.io/graphql)
• ✅ The API is queried on server-side with NextJS via getServerSideProps. (I think this one doesn’t have an origin since it’s running the query server-side)

The API doesn’t work when:

• ❌ I fetch https://example.com/api/graphql on the browser, specifically when I’m on https://example.com (the same domain where my NextJS app is running which is technically also the same express server).

Problems I ruled out here

• POST is not allowed. Ruled out because I can POST via Postman/Hoppscotch.
• Having a location for /api/graphql. Let me know if I’m wrong but they’re on the same port so a single / so proxy_pass should be fine right?

Possibly

• CORs? I’m not able to query (https://example.com/api/graphql) from (https://example.com/api/graphql). I’m also available to query from Hoppscotch which is clearly a different origin, why won’t my same domain not query it?

I keep getting the same error 502 Bad Gateway: