Réception JSON entre les questions locales React App et service Springboot locales

Question

Je courais un serveur Springboot local, que lorsque je y accéder localement dans le navigateur, me donne un objet JSON valide correctement formaté (je l'ai vérifié ce via formatter JSON).

Je suis également en cours d'exécution au niveau local une application utilisant React nœud. J'essaie d'utiliser fetch() pour récupérer cet objet JSON et rencontrer des problèmes. Enfin, contourner les problèmes d'en-tête CORs, mais ne peut pas comprendre pourquoi l'objet JSON ne revient pas. Voici mon code

var headers = new Headers(); 
headers.append("Content-type", "application/json;charset=UTF-8"); 

var myInit = { method: 'GET', 
       headers: headers, 
       mode: 'no-cors', 
       cache: 'default', 
};  

fetch(`http://localhost:3010/getJSON`, myInit) 
    .then(function(response){ 
    console.log(response.data); 
    console.log(response); 
    console.log(JSON.parse(JSON.stringify(response))); 
    },function(error){ 
    console.log(error); 
    }); 

Alors, quand je lance ceci dans Chrome avec le débogueur, les réponses aux 3 déclarations du journal sont:

1er enregistreur

undefined 

2ème enregistreur

Response {type: "opaque", url: "", redirected: false, status: 0, ok: false,   
…} 
body 
: 
(...) 
bodyUsed 
: 
false 
headers 
: 
Headers {} 
ok 
: 
false 
redirected 
: 
false 
status 
: 
0 
statusText 
: 
"" 
type 
: 
"opaque" 
url 
: 
"" 
__proto__ 
: 
Response 

3ème enregistreur

{} 

J'ai essayé beaucoup de différents parsing JSON, stringify, etc, en vain. La prochaine partie déroutante, est si dans le débogueur Chrome je vais dans l'onglet "Réseau", cliquez sur le/getJSON, il me montre tout l'objet JSON tout à fait bien dans les onglets "Aperçu" et "Réponse" . Donc, clairement, Chrome se connecte correctement. Voici l'onglet « têtes » de Chrome au sein de « réseau »:

Request URL:http://localhost:3010/getJSON 
Request Method:GET 
Status Code:200 
Remote Address:[::1]:3010 
Referrer Policy:no-referrer-when-downgrade 
Response Headers 
view source 
Content-Type:application/json;charset=UTF-8 
Date:Thu, 12 Oct 2017 16:05:05 GMT 
Transfer-Encoding:chunked 
Request Headers 
view source 
Accept:*/* 
Accept-Encoding:gzip, deflate, br 
Accept-Language:en-US,en;q=0.8 
Connection:keep-alive 
Host:localhost:3010 
Referer:http://localhost:3000/ 
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36 

J'ai essayé d'imiter cet en-tête dans ma demande, mais ne sais pas comment il est différent? Toute aide serait grandement appréciée car je me bats actuellement la tête contre le chemin avec ça!

Answer 1

Vous obtenez une réponse opaque, ce qui me dit que peut-être vous ne l'avez pas complètement résolu les en-têtes CORS situation. Si vous récupérez à partir du client, je vous suggère de le faire par l'intermédiaire de votre nodejs afin qu'au lieu d'appeler votre service springboot, vous appeliez node, vous évitant ainsi les problèmes de cors.

EDIT

Vous pouvez créer quelque chose comme ceci:

import express from 'express'; 
import request from 'request'; 

const router = express.Router(); 

router.get('/proxyname', (req, res) => { 
    // Removing IPv4-mapped IPv6 address format, if present 
    const requestUrl = [your service's endpoint]; 

    request(requestUrl, (err, apiResponse, body) => { 
    res.status(apiResponse.statusCode); 
    try { 
     res.json(JSON.parse(body)); 
    } catch (e) { 
     res.send(body); 
    } 
    }); 
}); 

export default router; 

puis sur votre fichier serveur nodejs, ajoutez, comme ceci:

import proxy from '[path to proxy file above]'; 
app.use('/path-to-endpoint', proxy); 

puis appeler du client au lieu de votre service SpringBoot.