Réagir à une application qui utilise l'API avec une autre origine (SCRO)

J'ai une réagir application, qui utilise java ee backend reste du serveur, en cours d'exécution sur un autre domaine. J'ai activé la SCRO:

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

Je suis à l'aide de réagir avec fetch comme ceci:

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

Mon réagir application est en cours d'exécution sur http://localhost:3000.
Quand je suis connecté, le serveur renvoie le Set-Cookie, mais le cookie n'est inclus dans aucun autre demande au serveur, à moins que j'essaie de me connecter à nouveau. Ensuite, il est inclus pour la demande de connexion.

Des suggestions?

Est le cookie valide en termes de date d'expiration, de domaine, de chemin d'accès, etc?
Le serveur est de retour ce cookie Set-Cookie: kek=qel4h9n27ov9ratshdrnqhrrhr; Version=1; Discard, donc je voudrais le croire?
Essayez de définir un chemin d'accès explicite de / le cookie (et aussi, si vous souhaitez définir plusieurs cookies je crois que vous devriez utiliser plusieurs Set-Cookie en-têtes).
J'ai essayé de changer le chemin d'accès, mais il a abouti à la même. Cookie: Set-Cookie:kek=9rev41dpo3eq337m389bb9mbe5; Version=1; Path=/; Domain=http://localhost:8080; Max-Age=100000. Je suis seulement en utilisant un cookie.

OriginalL'auteur fonnes | 2017-05-02

  1. 4

    L'installer.

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

    Une fois installé, cliquez sur son BrowserIcon et de basculer sur. C'est tout. Vous ne recevrez plus de message d'erreur.

    MODIFIER. Solution pour la Production
    Si vous voulez config de votre serveur (ou tout simplement pas l'ajout d'une extension de navigateur, essayez ceci:)

    • Si vous utilisez node.js procédez de la manière suivante: node.js serveur de fichiers: 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 en trop, vous pouvez ajouter: <?php header('Access-Control-Allow-Origin: *'); ?> dans votre Fichier PHP. Comme je vois, il n'est pas le cas, donc... De votre serveur (ex: Apache) ajouter la présente directive: l'en-Tête set Access-Control-Allow-Origin: * dans le menu Paramètres (comme la première option).

    OriginalL'auteur JuMoGar

  2. 4

    Je veux juste partager comment je fais mon développement local indolore par cette post si vous utilisez create-react-app par le simple ajout de votre API principales url de proxy pour votre package.js par exemple "proxy": "http://localhost:8080/API"
    Pas besoin d'installation de la SCRO sur votre backend.

    est qui conviennent pour la production d'ailleurs?
    Lors du passage à la production, vous devriez avoir le même serveur. n'est-ce pas? lorsque vous générez réagir application de la production, vous n'avez pas besoin de réagir-script plus.

    OriginalL'auteur praHoc

  3. 1

    Donc, j'ai résolu le problème en utilisant un autre stackoverflow fil et robertklep commentaire. Comme l'a déclaré ici: "en travaillant sur localhost, le cookie de domaine doit être omise.". J'ai mis en place robertkleps idée, mais n'a pas défini le domaine. Il en est résulté un Set-Cookie comme ceci: Set-Cookie:kek=7fukucsuji1n1ddcntc0ri4vi; Version=1; Path=/; Max-Age=100000. Cela fonctionne très bien.

    OriginalL'auteur fonnes