node.js - NestJS Graphql CORS:通过远程主机访问 API 时出现问题,而在本地主机上运行
问题描述
我目前正在尝试在 Google Cloud Run 上使用 Graphql 部署我的 NestJS 服务器。我还有一个作为客户端使用的 React 应用程序,它托管在 Netlify 上。
但是,当我尝试运行此控制台时,我在控制台中收到以下 CORS(跨源资源共享)错误:
Access to fetch at 'https://google-cloud.run.app/graphql' from origin 'https://myapp.netlify.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
我的 NestJS 应用配置如下所示:
// {cors: true}
const app = await NestFactory.create(AppModule);
app.enableCors({
origin: true,
credentials: true,
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
allowedHeaders: "Content-Type,Accept,Authorization,Access-Control-Allow-Origin"
});
在另一个 stackoverflow 帖子中,我看到 GraphQL CORS 配置覆盖了 NestJS CORS 配置,所以我也将 CORS 逻辑添加到 GraphQLapp.module.ts
中,如下所示:
@Module({
controllers: [],
imports: [
...,
GraphQLModule.forRootAsync({
useFactory: (configService) => {
const playground = configService.get("GRAPHQL_PLAYGROUND");
const introspection = configService.get("GRAPHQL_INTROSPECTION");
return {
autoSchemaFile: true,
playground,
introspection: playground || introspection,
cors: {
credentials: true,
origin: true,
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
allowedHeaders: "Content-Type,Accept,Authorization,Access-Control-Allow-Origin"
},
context: ({req}) => {
return {req};
},
installSubscriptionHandlers: true
};
},
inject: [ConfigService],
imports: [ConfigModule]
}),
...
当我从 运行客户端localhost
并且直接连接到 Google Cloud Run Container 时,此时一切正常,并且我没有收到任何 CORS 错误。我正在使用 Apollo GraphQL 客户端发出 API 请求。
但是,当我使用 Netlify 客户端时,我遇到了上面的 CORS 问题。
关于如何解决这个问题的任何想法?这是 Netlify 的问题吗?这是 Google Cloud Run 问题吗?或者我是否缺少 CORS 的任何标题?
解决方案
推荐阅读
- intellij-idea - 如何在 scalatest/playspec 中只运行一项测试
- javascript - 为 ES 模块做 require.resolve
- r - R使用openxlsx编写excel时as.vector(x,“character”)出错
- android - Android 构建在启动时崩溃
- nlp - BERT 多语言模型 - 用于分类
- c++ - 如何将模块化代码更改为 OOP 设计?
- c++ - 为整数序列的每个参数调用一个 void 函数
- reactjs - 在 reactJs 中使整行可点击
- python - 为什么文本的特征提取不返回所有可能的特征名称?
- python - python - 如何在Python中迭代其(k,v)对使用列表中的连续项目的字典