J'utilise un serveur react dev sur http: // localhost: 3000 et un serveur express sur http: // localhost: 8080 et j'utilise un Apollo Client pour interroger le serveur. Pour permettre la transmission des données de session du client au serveur, j'ai ajouté le paramètre credentials: "include" lors de l'initialisation du client Apollo.
J'ai ajouté la ligne suivante dans mon serveur express (avant les itinéraires sont définis) pour configurer les cors:
app.use (cors ({credentials: true, origin: "http: // localhost: 3000"}));
Cependant, lors de l'exécution de requêtes, l'erreur suivante est générée:
Access to fetch at 'http://localhost:8080/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
Pourquoi la réponse d'en-tête apparaît-elle sous la forme * ? Est-ce que je ne configure pas correctement les COR ou est-ce que je manque autre chose?
3 Réponses :
Puisque vous avez identifiants: true , vous devez inclure les identifiants dans votre appel de récupération:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);
ou
fetch(url, {
credentials: 'include'
})
Je crois avoir déjà l'équivalent Apollo de ce apollographql.com/docs/react/ mise en réseau / authentification
Avez-vous essayé de définir les informations d'identification sur false pour exclure qu'il s'agit d'un problème de configuration sur le backend?
Cette erreur est une erreur CORS générée par le navigateur. utilisez npm install --save http-proxy-middleware dans votre frontal et ajoutez le fichier setupProxy.js dans frontend / src / setupProxy.js
setupProxy.js
"proxy": "http://localhost:8080"
Solution alternative
Si vous utilisez le serveur de développement webpack, voici une autre façon de proxy des requêtes sans apporter de modifications sur NodeJS. Ajouter ceci à package.json:
//run defferent ports for website and api server
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/api/', { target: 'http://localhost:8080/' })); //make change as per your application (So you can access your data on http://localhost:8080/api/ )
}; Doit permettre à webpack de transmettre par proxy les requêtes faites à http: // localhost: 3000 à http: // localhost: 8080 .
Mais cela signifierait que la demande devra être adressée à http: // localhost: 3000 à la place sur http: // localhost: 8080 .
Cela permettra à tous les clients d'accéder à l'API et tout le point de définition de l'origine serait annulé
c'est juste pour exécuter votre application avec le même hôte avec un oring différent sur votre machine locale. lorsque vous mettez votre code en production, cela n'affecte pas votre code.
Dans ce cas, cela fonctionnera. J'ai modifié votre réponse pour inclure une solution alternative pour les cas où create-react-app est utilisé.
Au mieux, c'est une solution de fortune destinée au développement. L'hypothèse ici est qu'en production, l'application Web cliente et l'API seront disponibles dans le même domaine. Dans ce cas, vous ne travaillez plus avec des requêtes inter-domaines et CORS n'est plus nécessaire. En réalité, cependant, il est fort possible que le domaine de l'API soit en fait différent, même en production, et CORS devra être correctement configuré.
Le problème que je rencontrais ici était que malgré l'activation de CORS pour express:
gqlServer.applyMiddleware({ app, path: "/graphql", cors: false });
L'intergiciel GraphQL supplantait le paramètre. Assurez-vous de passer le paramètre cors: false comme indiqué ci-dessous si vous utilisez un serveur Apollo et un middleware associé.
app.use(cors({ credentials: true, origin: "http://localhost:3000" }));
Merci beaucoup, cela a fonctionné pour moi. Question cependant; comment puis-je être sûr que cors n'est pas complètement désactivé avec cette solution?
Essayez d'exécuter votre client à partir d'un autre hôte. La politique de base devrait bloquer les demandes
Va faire, merci. +1 à votre solution car elle semble avoir fonctionné pour moi.
Merci pour cet homme! J'ai rencontré ce bug étrange, il me suffit de désactiver les cors sur le graphql. Merci beaucoup!