我正在AWS Lambda上编写graphql服务器组件(不使用graphql-server)。在客户端,我使用apollo-client。关于lambda函数的响应我设置
const response = {
statusCode: 200,
headers: {
"Access-Control-Allow-Origin": "*" // Required for CORS support to work
},
body: JSON.stringify({
result: 'mock data',
input: event,
}),
};
callback(null, response);
在客户端使用ApolloClient我收到以下错误
对预检请求的响应未通过访问控制检查:否' Access-Control-Allow-Origin'标头出现在请求的资源上。起源' http://localhost:8080'因此不允许访问。
然而,当我使用像axios这样的东西执行相同的请求时,它工作正常。此外,当我只是通过postman这样的请求执行请求时,我会看到" Access-Control-Allow-Origin"响应启用设置。这是apollo-client的已知问题,我该如何解决这个问题?
答案 0 :(得分:9)
要解决Apollo的CORS问题,您必须将no-cors
选项传递给基础的fetch
。
import ApolloClient from "apollo-boost";
const client = new ApolloClient({
uri: "your client uri goes here",
fetchOptions: {
mode: 'no-cors',
},
});
这不是特定的Apollo问题,而是一种应在fetch
侧解决的配置,请参阅此以获取更多信息:https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api#cross-origin_requests
我想知道为什么它可以与Axios一起使用,我希望您在某处设置no-cors
模式。
答案 1 :(得分:1)
我假设您正在使用AWS API网关。
有一个问题是:您是否为网关启用了CORS? See how
我认为应该解决您的问题,如果您还要发送Cookie,您也可以设置"Access-Control-Allow-Credentials" : true
标题。
`
答案 2 :(得分:0)
这是一个有效的示例。服务器必须启用了CORS。这意味着您的http请求的来源
必须将响应的access-control-allow-origin标头与您的请求相匹配。
access-control-allow-origin:https://example.com
然后在Angular客户端上,您可以使用以下模块:
import {NgModule} from '@angular/core';
import {ApolloModule, APOLLO_OPTIONS} from 'apollo-angular';
import {HttpLinkModule, HttpLink} from 'apollo-angular-link-http';
import {InMemoryCache} from 'apollo-cache-inmemory';
import {environment} from 'src/environments/environment';
import {errorLink} from './dm-core/graphql/apollo-link-error';
import {concat} from 'apollo-link';
export function createApollo(httpLink: HttpLink) {
return {
link: concat(errorLink, httpLink.create({uri: environment.graphql, withCredentials: true})),
cache: new InMemoryCache(),
defaultOptions: {
watchQuery: {
errorPolicy: 'all'
}
}
};
}
@NgModule({
exports: [ApolloModule, HttpLinkModule],
providers: [
{
provide: APOLLO_OPTIONS,
useFactory: createApollo,
deps: [HttpLink]
}
]
})
export class GraphQLModule {}
请注意“ withCredentials:true”:
link: concat(errorLink, httpLink.create({uri: environment.graphql, withCredentials: true})),
答案 3 :(得分:0)
首先,我们要做的错误是 从“ apollo-boost ”导入ApolloClient。实际上,我们必须从“ apollo-client ”导入 ApolloClient 。
import ApolloClient from 'apollo-client';
因为 apollo-boost 中的 ApolloClient 仅支持较小的配置选项子集。 apollo-client 中的 ApolloClient 为您提供了所有配置选项。
然后我们只能向Apollo客户端实例提供链接和缓存
import { InMemoryCache } from "apollo-cache-inmemory";
import { createHttpLink } from 'apollo-link-http';
const client = new ApolloClient({
link: new createHttpLink(
{
uri: "Your QraphQL Link"
}
),
cache: new InMemoryCache(),
});