本文是小编为大家收集整理的关于Apollo-Client不适合CORS的处理/解决方法，可以参考本文帮助大家快速定位并解决问题，中文翻译不准确的可切换到English标签页查看源文。
问题描述
我正在AWS lambda上编写GraphQl Server组件(不使用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我得到以下错误
对飞行前请求的响应未传递访问控制检查:在请求的资源上没有"访问控制"标头.原点' http://localhost:8080 '因此不允许访问.
但是，当我使用Axios之类的内容执行相同的请求时，它可以正常工作.此外，当我刚刚对邮递员之类的内容执行请求时，我会在响应上看到启用"访问控制"设置.这是Apollo-Client的已知问题，我该如何解决?
推荐答案
要使Apollo的CORS问题解决问题，您必须将no-cors选项传递给基础fetch.
.import ApolloClient from "apollo-boost";
const client = new ApolloClient({
uri: "your client uri goes here",
fetchOptions: {
mode: 'no-cors',
},
});
这不是一个特定的阿波罗问题，而是要在fetch方面解决的配置，请参阅此信息: https://develovelers.google.com/web/web/ilt/pwa/pwa/working-with-with-the-fetch-fetch-fetch-api一下cross-origin_requests
我想知道为什么它确实适用于您的Axios，我希望您在某个地方设置no-cors模式.
其他推荐答案
ivan的答案适用于Apollo Client2.x.x.x.
是正确的对于阿波罗客户端> = 3.0.0您可以使用:
import { ApolloClient, HttpLink } from '@apollo/client';
const client = new ApolloClient({
link: new HttpLink({
uri: 'your client uri goes here',
fetchOptions: {
mode: 'no-cors'
}
}),
});
其他推荐答案
我假设您正在使用AWS API网关.
您的一个问题是:您是否启用了网关的CORS? 如何查看
我相信应该解决您的问题，如果您还发送cookie，也可以设置"Access-Control-Allow-Credentials" : true标题.
问题描述
I am writing a graphql server component on AWS Lambda (NOT using graphql-server). On the client side I'm using apollo-client. On the response of the lambda function I'm setting
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);
On the client side using ApolloClient I get the following error
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
However when I execute the same request using something like axios then it works fine. Furthermore when I just execute the request over something like postman I see the "Access-Control-Allow-Origin" setting enabled on the response. Is this a known issue with apollo-client and how do I fix this?
推荐答案
To workaround the CORS issue with Apollo you have to pass the no-cors option to the underlying fetch.
import ApolloClient from "apollo-boost";
const client = new ApolloClient({
uri: "your client uri goes here",
fetchOptions: {
mode: 'no-cors',
},
});
This is not a specific Apollo problem, rather a configuration that is meant to be tackled on the fetch side, see this for more information: https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api#cross-origin_requests
I wonder why it does works with Axios for you, I'd expect you to have the no-cors mode set somewhere.
其他推荐答案
Ivan's answer is correct for Apollo client 2.x.x.
For Apollo client >= 3.0.0 you can use:
import { ApolloClient, HttpLink } from '@apollo/client';
const client = new ApolloClient({
link: new HttpLink({
uri: 'your client uri goes here',
fetchOptions: {
mode: 'no-cors'
}
}),
});
其他推荐答案
I'd assume you're using the AWS API Gateway.
One question for you is: have you enabled CORS for your gateway? See how
I believe that should solve your issues, if you're also sending cookies, you can also set the "Access-Control-Allow-Credentials" : true header as well. `
更多相关问答
联系站长