CORS issue when using cookie in deployed AWS environment - reactjs

Question

Having a nodejs server using Nestjs, Express, and GraphQL I configure the server with the below.
GraphqlOptions.ts
#Injectable()
export class GraphqlOptions implements GqlOptionsFactory {
createGqlOptions(): Promise<GqlModuleOptions> | GqlModuleOptions {
return {
context: ({ req, res }) => ({ req, res }),
autoSchemaFile: '/tmp/schema.graphql',
playground: {
endpoint: '/graphql',
},
introspection: true,
cors: {
// Read that we should do this so GraphQL will not override the Express CORS configuration
},
}
}
}
}
main.ts
async function bootstrap() {
const app = await NestFactory.create(AppModule)
await app.listen(3000)
}
bootstrap()
index.ts
let cachedServer: Server
const bootstrapServer = async (): Promise<Server> => {
const expressApp = express()
expressApp.use(eventContext())
const app = await NestFactory.create(
AppModule,
new ExpressAdapter(expressApp)
)
app.useGlobalPipes(new ValidationPipe())
const corsOptions = {
credentials: true,
origin: [`${process.env.WEB_APP_URL}`],
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS'
}
app.enableCors(corsOptions)
app.use(cookieParser())
app.use(helmet())
await app.init()
return createServer(expressApp)
}
export const handler: APIGatewayProxyHandler = async (event, context) => {
if (!cachedServer) {
cachedServer = await bootstrapServer()
}
return proxy(cachedServer, event, context, 'PROMISE').promise
}
And in the Reactjs app configuring Apollo Client with the below.
private readonly httpLink = createHttpLink({
uri: 'https://theserver.yyy',
credentials: 'include',
fetch,
fetchOptions: {
credentials: 'include'
}
})
private readonly authLink = setContext((_, { headers }) => {
return {
headers: {
...headers,
authorization: this.accessToken ? `Bearer ${this.accessToken}` : '',
},
}
})
this.apolloClient = new ApolloClient({
cache: this.cache,
link: this.authLink.concat(this.httpLink),
connectToDevTools: true,
credentials: 'include',
})
When running the server (localhost:4000) and the Reactjs app (localhost:3000) locally everything works fine but technically both are from the same origin (localhost) where when apps deployed server is (theserver.yyy) domain and reactjs (thewebap.ddd) domain in result receiving the below in Chrome browser.
Access to fetch at 'https://theserver.yyy/graphql' from origin 'https://thewebap.ddd' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.
And similar using Firefox.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://theserver.yyy/graphql. (Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’).
CORS is enabled in AWS API Gateway. I'd appreciate some direction to learn how to allow CORS origin from my webapp to the server and learn about CORS in general. Specifically, any hints configuring nestjs GraphQL is appreciated.

Answer 1

The solution is you need to pass CORS options in GraphqlOptions and not in Express configuration.