React/Redux + super agent, le premier appel se termine

Question

J'écris une application rea-redux où je fais des appels de service dans mes middlewares en utilisant superagent. J'ai trouvé un comportement très étrange où le premier appel à ma recherche api se termine toujours. J'ai essayé d'attendre 10 à 30 secondes avant de faire le premier appel, et d'enregistrer chaque étape du processus et je n'arrive pas à comprendre pourquoi cela se produit.

Mon créateur d'action ressemble

export function getSearchResults(searchQuery) { 
return { 
     query: searchQuery, 
     type: actions.GO_TO_SEARCH_RESULTS 
    } 
} 

Il frappe la logique middleware ici:

var defaultURL = '/myServer/mySearch'; 

callPendingAction(); 

superagent.get(defaultURL) 
     .query({query: action.query}) 
     .end(requestDone); 


//sets state pending so we can use loading spinner 
function callPendingAction() { 
    action.middlewares.searchIRC.readyState = READY_STATES.PENDING; 
    next(action); 
} 

//return error or response accordingly 
function requestDone(err, response) { 
    console.log("call error", err); 
    const search = action.search; 
    if (err) { 
     search.readyState = READY_STATES.FAILURE; 
     if (response) { 
      search.error = response.err; 
     } else if (err.message) { 
      search.error = err.message; 
     } else { 
      search.error = err; 
     } 
    } else { 
     search.readyState = READY_STATES.SUCCESS; 
     search.results = fromJS(response.body); 
    } 
    return next(action); 
} 

La requête est correcte même lorsque l'appel est terminé, je reçois ce message err retour:

Request has been terminated 
Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc. 
at Request.crossDomainError (http://localhost:8000/bundle.js:28339:14) 
at XMLHttpRequest.xhr.onreadystatechange (http://localhost:8000/bundle.js:28409:20) 

Il semble que la page soit rafraîchie à chaque fois.

Je n'arrive pas à trouver des indices sur la raison pour laquelle cela se produit, il semble que peu importe ce que le premier appel échoue, mais il est correct après le premier appel terminé. Apprécierait toute contribution, merci!

MISE À JOUR: il semble donc que cela soit lié au chrome, je suis sur Version 47.0.2526.80 (64-bit). Cette application est un iframe dans une autre application et je crois que cela cause un problème avec chrome parce que quand j'essaye cela dans Firefox, il n'y a pas de problème. Ce qui est étrange c'est que seulement le premier appel donne le numéro de CORS, alors il semble être corrigé par la suite. Si quelqu'un a des commentaires ou une solution de contournement, je l'apprécierais grandement. Merci d'avoir lu.

Answer 1

Avait le même problème, juste compris grâce à la answer provided by @KietIG sur le sujet ReactJS with React Router - strange routing behaviour on Chrome.

La réponse n'a rien à voir avec CORS. La demande a été annulée car Chrome s'était éloigné de la page au milieu de la demande. Cela se produisait parce que event.preventDefault() n'avait pas été appelée dans l'un des gestionnaires de soumission de formulaire. Il semble que Chrome gère cela différemment des autres navigateurs. Voir le lien de réponse ci-dessus pour plus de détails.

Answer 2

Je ne connais pas les effets secondaires, mais vous obtenez des erreurs CORS. Ajouter la méthode .withCredentials() à votre demande.

De la superagent docs: Méthode

Les .withCredentials() permet la possibilité d'envoyer des cookies à partir l'origine, mais seulement lorsque "Access-Control-Allow-Origin" est pas un caractère générique ("*"), et "Access-Control-Allow-Credentials" est "true".

Cela devrait corriger:

superagent.get(defaultURL) 
     .query({query: action.query}) 
     .withCredentials() 
     .end(requestDone); 

Plus d'informations sur le partage des ressources Cross Origin se trouve here.

Answer 3

Dans mon cas, cela se produisait lorsque j'essayais de définir un en-tête de requête HTTP aléatoire (comme X-Test) côté client et que AWS Lambda le rejetait lors de la requête OPTIONS ou quelque chose d'autre.