web-dev-qa-db-ja.com

apollo-clientはCORSで動作しません

AWS Lambdaでgraphqlサーバーコンポーネントを作成しています（graphql-serverは使用していません）。クライアント側では、apollo-clientを使用しています。私が設定しているラムダ関数の応答で

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：808 'はアクセスを許可されません。

ただし、axiosのようなものを使用して同じリクエストを実行すると、正常に機能します。さらに、郵便配達員のようなものに対してリクエストを実行するだけで、レスポンスで「Access-Control-Allow-Origin」設定が有効になっているのがわかります。これはapollo-clientの既知の問題ですか？どうすれば修正できますか？

lambdacorsapollo-client
9
tmp dev

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モードはどこかに設定されます。

15
ivanalejandro0

AWS API Gatewayを使用していると思います。

質問の1つは、ゲートウェイでCORSを有効にしましたか？ 方法を見る

Cookieを送信している場合は、"Access-Control-Allow-Credentials" : trueヘッダーも。 `

2
oreoluwa