如何为 apollo-server-lambda 启用 cors
Posted
技术标签:
【中文标题】如何为 apollo-server-lambda 启用 cors【英文标题】:How to enable cors for apollo-server-lambda 【发布时间】:2020-12-27 08:51:05 【问题描述】:好的,我看到很多关于如何为 apollo-express 启用 cors 的答案,但我还没有找到真正适用于 apollo-server-lambda 的答案。
这是我从 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.
我不知道如何更改值“https://example.com”。这是我如何尝试创建服务器的代码:
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,
,
);
我还需要在这里做什么?
编辑 我不确定这是否相关,但这是我的 graphql.module.ts 文件。这就是我在前端设置 grahql 的方式:
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
另外,如果有人好奇,我正在使用 AWS Api Gateway 来使用 lambda,但我相信我已经正确添加了 cors 的配置。
我对此感到茫然。我需要改变什么?
【问题讨论】:
对于对5j3gae3086.execute-api.us-east-2.amazonaws.com/alpha 的请求,服务器响应 502 Bad Gateway 错误。通过直接在浏览器中打开该 URL,您可以看到相同的错误。所以你没有 CORS 问题。修复 502 错误的原因,您可能会发现现有的 CORS 配置已经按预期工作。所以检查https://5j3gae3086.execute-api.us-east-2.amazonaws.com/alpha/
服务器上的日志;该 502 错误似乎意味着它以某种方式代理另一台服务器,但未能成功连接到另一台服务器。日志会告诉你。
哦,我只是在尝试修复它。让我将其恢复为工作状态
好的,已经开始运行了。我可以从操场上获取查询,但是一旦我尝试从我的前端进行阿波罗查询,我就会收到问题中描述的错误。
我刚刚在邮递员上试了一下,它按预期工作。我现在怀疑我的前端。
【参考方案1】:
按照此处的 CORS 设置说明,我可以成功使用 apollo-angular 返回简单查询的结果。不需要特殊的标题等。
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);
);
【讨论】:
以上是关于如何为 apollo-server-lambda 启用 cors的主要内容,如果未能解决你的问题,请参考以下文章