web-dev-qa-db-fra.com

apollo-client ne fonctionne pas avec CORS

J'écris un composant serveur graphql sur AWS Lambda (PAS en utilisant graphql-server). Côté client, j'utilise apollo-client. Sur la réponse de la fonction lambda que je mets

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);

Du côté client en utilisant ApolloClient, j'obtiens l'erreur suivante

La réponse à la demande de contrôle en amont ne passe pas la vérification du contrôle d'accès: aucun en-tête "Access-Control-Allow-Origin" n'est présent sur la ressource demandée. L'origine ' http: // localhost: 808 ' n'est donc pas autorisée à accéder.

Cependant, lorsque j'exécute la même demande en utilisant quelque chose comme axios, cela fonctionne bien. En outre, lorsque je viens d'exécuter la demande sur quelque chose comme facteur, je vois le paramètre "Access-Control-Allow-Origin" activé sur la réponse. Est-ce un problème connu avec apollo-client et comment puis-je résoudre ce problème?

lambdacorsapollo-client
9
tmp dev

Pour contourner le problème CORS avec Apollo, vous devez passer le no-cors option sur le fetch sous-jacent.

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "your client uri goes here",
  fetchOptions: {
    mode: 'no-cors',
  },
});

Ce n'est pas un problème Apollo spécifique, mais plutôt une configuration qui doit être traitée du côté fetch, consultez ceci pour plus d'informations: https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api # cross-Origin_requests

Je me demande pourquoi cela fonctionne avec Axios pour vous, je m'attends à ce que vous ayez le no-cors mode défini quelque part.

15
ivanalejandro0

Je suppose que vous utilisez la passerelle API AWS.

Une question pour vous est la suivante: avez-vous activé CORS pour votre passerelle? Voir comment

Je crois que cela devrait résoudre vos problèmes, si vous envoyez également des cookies, vous pouvez également définir le "Access-Control-Allow-Credentials" : true en-tête également. "

2
oreoluwa