Reactjs 在部署的AWS环境中使用cookie时出现CORS问题

有一个使用Nestjs、Express和GraphQL的nodejs服务器，我使用以下配置服务器

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',
})

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
        },
      }
    }
  }
}

索引

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
}

在本地运行服务器（

localhost:4000

）和Reactjs应用程序（

localhost:3000

）时，一切正常，但从技术上讲，两者都来自同一个来源（localhost），其中部署的应用程序服务器是（

server.yyy

）域和Reactjs（

webap.ddd

）结果中的域在Chrome浏览器中接收以下内容

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'.

使用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’).

---

AWS API网关中启用了
CORS
。我很想了解如何将CORS源代码从我的webapp允许到服务器，并了解CORS的一般情况。具体来说，任何配置nestjs GraphQL的提示都是值得赞赏的。
解决方案是您需要在
GraphqlOptions
中传递CORS选项，而不是在Express配置中传递

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’).