Geek Answers Handbook

React / Redux + super agent, the first call ends

I am writing a response-redux application where I make some utility calls in my environments using a super agent. I found a very strange behavior when the first call of my api search always ends. I tried to wait 10-30 seconds before making the first call, and record every step of the process, and I can’t determine exactly why this is happening.

My action creator looks like

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

It refers to the middleware logic:

 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); }

The request is correct, even when the call is completed, I get this error message:

 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)

The page also seems to refresh every time.

I cannot find any clues as to why this is happening, it does not seem to matter that the first call fails, but then it is normal after this first completed call. Thank you for entering, thanks!

UPDATE : it looks like this is due to chrome, I'm on Version 47.0.2526.80 (64-bit) . This application is an iframe in another application, and I believe that this causes a problem with chrome, because when I try to do this in firefox, there is no problem. It is strange that only the first call gives the CORS problem, after which it seems to be fixed after that. If anyone has input or a workaround, I would really appreciate it. Thank you for reading.

+6
source share
3 answers

Had the same problem, just figured it out thanks to the answer provided by @KietIG on ReactJS with React Router - strange routing behavior in Chrome .

The answer had nothing to do with CORS. The request was canceled because Chrome moved from the page in the middle of the request. This happened because event.preventDefault() not called in one of the form view handlers. Chrome seems to handle this differently than other browsers.

For more details see the link for the answer.

+7
source

In my case, this happened when I tried to set an arbitrary HTTP request header (e.g. X-Test ) on the client side, and either AWS Lambda rejected it during the OPTIONS request or did something else.

+1
source

I don't know about side effects, but you get CORS errors. Add the .withCredentials() method to your request.

From superspy docs :

The .withCredentials () method allows you to send cookies with origin, however, only if "Access-Control-Allow-Origin" is not wildcard ("*"), and "Access-Control-Allow-Credentials" is "true".

This should fix:

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

More information on Cross Origin resource sharing can be found here .

0
source

More articles:


All Articles