如何解决如何为apollo-server-lambda启用cors
好的,所以我看到了很多关于如何为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上正确添加了配置。
我对此不知所措。我需要更改什么?
解决方法
按照此处的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);
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。