How to enable cors for apollo-server-lambda - aws-lambda

Question

Ok so I see a lot of answers for how to enable cors for apollo-express, but I haven't found one really for apollo-server-lambda.
This is the error that I'm getting from chrome:
Access to XMLHttpRequest at 'https://5j3gae3086.execute-api.us-east-2.amazonaws.com/alpha/'
from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight
request doesn't pass access control check: The 'Access-Control-Allow-Origin' header
has a value 'https://example.com' that is not equal to the supplied origin.
I do not know how to change the value "https://example.com." Here is my code of how I'm trying to create the server:
const { ApolloServer } = require('apollo-server-lambda')
const typeDefs = require('./schema')
const resolvers = require ('./resolvers')
const server = new ApolloServer({
typeDefs,
resolvers,
introspection: true,
playground: {
endpoint: "/alpha/graphql",
},
});
exports.graphqlHandler = server.createHandler({
cors: {
// origin: true,
origin: "http://localhost:4200", // <-- This is not changing the header value. Do I need to do it from the frontend?
credentials: true,
},
});
What else do I need to do here?
Edit
I'm not sure if this is relevant, but here is my graphql.module.ts file. This is how I'm setting grahql in the frontend:
import { NgModule } from '#angular/core';
import { APOLLO_OPTIONS } from 'apollo-angular';
import { ApolloClientOptions, InMemoryCache } from '#apollo/client/core';
import { HttpLink } from 'apollo-angular/http';
const uri = 'https://5j3gae3086.execute-api.us-east-2.amazonaws.com/alpha/'; // <-- add the URL of the GraphQL server here
export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
return {
link: httpLink.create({ uri,
// these comments are things that I tried with no luck :(
// fetchOptions: {
// mode: 'no-cors',
// },
// headers: {
// 'Access-Control-Allow-Origin': 'http://localhost:4200',
// 'Access-Control-Allow-Methods': 'POST',
// 'Access-Control-Allow-Headers': 'application/json'
// "Access-Control-Allow-Credentials" : true
// "X-CSRFToken": Cookies.get('csrftoken')
// },
}),
cache: new InMemoryCache(),
};
}
#NgModule({
providers: [
{
provide: APOLLO_OPTIONS,
useFactory: createApollo,
deps: [HttpLink],
},
],
})
export class GraphQLModule { }
Also in case anyone is curious, I'm using AWS Api Gateway to use the lambda, but I believe I have the configuration for cors added correctly on that.
I'm at a loss with this. What do I need to change?

Answer 1

Following the CORS setup instructions here I can successfully use apollo-angular to return results for a simple query. No special headers etc. were needed.
https://www.apollographql.com/docs/apollo-server/deployment/lambda/
// serverless.yml
events:
- http:
path: graphql
method: post
cors: true
- http:
path: graphql
method: get
cors: true
// graphql.js
exports.graphqlHandler = server.createHandler({
cors: {
origin: '*',
credentials: true,
},
});
// graphql.module.ts
import {NgModule} from '#angular/core';
import {APOLLO_OPTIONS} from 'apollo-angular';
import {ApolloClientOptions, InMemoryCache} from '#apollo/client/core';
import {HttpLink} from 'apollo-angular/http';
const uri = 'https://xxx/dev/graphql';
export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
return {
link: httpLink.create({uri}),
cache: new InMemoryCache(),
};
}
#NgModule({
providers: [
{
provide: APOLLO_OPTIONS,
useFactory: createApollo,
deps: [HttpLink],
},
],
})
export class GraphQLModule {}
// In Angular 10
this.apollo
.watchQuery({
query: gql`
{
users {
email
}
}
`,
})
.valueChanges.subscribe(result => {
console.log(result.data);
});

Answer 2

Unlike an initial question, graphql.js is replaced to typescript as following.
// graphql.ts
exports.graphqlHandler = server.createHandler({
expressGetMiddlewareOptions: {
cors: {
origin: '*',
credentials: true,
},
},
});