web-dev-qa-db-fra.com

React app utilisant l'API avec une autre origine (CORS)

J'ai une application React, qui utilise un Java ee backend rest server, fonctionnant sur un autre domaine. J'ai activé CORS:

Access-Control-Allow-Origin : http://localhost:3000
Access-Control-Allow-Headers : Origin, content-type, accept, authorization
Access-Control-Allow-Credentials : true
Access-Control-Allow-Methods : GET, POST, PUT, DELETE, OPTIONS, HEAD
Access-Control-Max-Age : 1209600

J'utilise réagir avec fetch comme ceci:

export function get(path, headers) {
    return fetch(apiUrl + path, {
        "metod" : "GET",
        "headers" : headers,
        "credentials" : "include"
    })
}

Mon application React s'exécute sur http://localhost:3000. Lorsque je me connecte, le serveur renvoie le Set-Cookie, mais le cookie n'est inclus dans aucune autre demande au serveur, sauf si j'essaye de me reconnecter. Ensuite, il est inclus pour cette demande de connexion spécifique.

Aucune suggestion?

reactjscookiescorsfetch
7
fonnes

J'ai donc résolu le problème en utilisant un autre thread stackoverflow et le commentaire de robertklep. Comme indiqué ici : "Lorsque vous travaillez sur localhost, le domaine des cookies doit être entièrement omis.". J'ai implémenté l'idée de robertkleps, mais je n'ai pas défini le domaine. Il en est résulté un Set-Cookie comme celui-ci: Set-Cookie:kek=7fukucsuji1n1ddcntc0ri4vi; Version=1; Path=/; Max-Age=100000. Cela fonctionne bien.

1
fonnes

Je veux juste partager comment je rend mon développement local indolore par ceci post si vous utilisez create-react-app en ajoutant simplement votre proxy d'URL d'API principal à votre package.js par exemple "proxy": "http://localhost:8080/API" Pas besoin de configurer CORS sur votre backend.

5
praHoc

Installez ceci.

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=es

Une fois installé, cliquez sur son BrowserIcon et activez-le. C'est tout. Vous ne recevrez plus d'erreur.

ÉDITER. Solution pour la production Si vous voulez le configurer à partir de votre serveur (ou simplement ne pas ajouter d'extension de navigateur, essayez ceci :)

  • Si vous utilisez node.js, procédez comme suit: fichier serveur node.js: response.writeHead(200, { 'Content-Type': contentType, 'Access-Control-Allow-Origin': '*' })

  • fetch('http://ajax.googleapis.com/ajax/services/feed/load?v=‌​1.0&num=8&q=http://r‌​ss.cnn.com/rss/editi‌​on_entertainment.rss‌​?output=rss', { method: 'get', mode: 'no-cors', }).then(() => { console.log('Works!'); });

  • Autre solution: si vous utilisez PHP aussi, vous pouvez ajouter: <?php header('Access-Control-Allow-Origin: *'); ?> dans votre fichier PHP. Comme je le vois, ce n'est pas le cas, donc ... Dans votre serveur (par exemple: Apache) ajoutez cette directive: Header set Access-Control-Allow-Origin * dans Settings (comme première option).

3
JuMoGar