本文介绍了React / Redux +超级代理,第一次调用终止的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在编写一个react-redux应用程序,我正在使用superagent在我的中间件中进行一些服务调用。我发现了一个非常奇怪的行为,我对搜索API的第一次调用总是被终止。我已经尝试在第一次调用之前等待10-30秒,并记录整个过程中的每一步,我似乎无法确定为什么会发生这种情况。

I am writing a react-redux app where I am making some service calls in my middlewares using superagent. I have found a very strange behavior where the first call to my search api always gets terminated. I have tried waiting 10-30 seconds before making the first call, and logging every step along the process and I cannot seem to pinpoint why this is happening.

我的行动创建者看起来像

My action creator looks like

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

它击中了中间件逻辑这里:

It hits the middleware logic here :

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 query is correct even when the call is terminated, I get this err message back :

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)

页面看起来每个页面刷新时间也是。

It appears the page refreshes each time too.

我似乎无法找到任何关于为什么会发生这种情况的线索,看起来第一次调用失败似乎无关紧要,但是在第一次终止之后就没问题了呼叫。非常感谢任何输入,谢谢!

I cannot seem to find any clues as to why this happens, it seems not matter what the first call fails, but then it is fine after that first terminated call. Would appreciate any input, thanks!

UPDATE :所以看起来这与chrome有关,我在版本47.0.2526.80(64位)。这个应用程序是另一个应用程序中的iframe,我相信这会导致chrome出现问题,因为当我在firefox中尝试这个时没有问题。奇怪的是只有第一个调用给出了CORS问题,然后它似乎得到了纠正。如果有人有输入或解决方法,我将非常感激。感谢您的阅读。

UPDATE: so it seems this is related to chrome, I am on Version 47.0.2526.80 (64-bit). This app is an iframe within another app and I believe that is causing a problem with chrome because when I try this in firefox there is no issue. What is strange is only the first call gives the CORS issue, then it seems to be corrected after that. If anyone has input or a workaround, I would greatly appreciate it. Thanks for reading.

推荐答案

出现同样的问题,感谢主题。

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

答案与CORS无关。该请求已被取消,因为Chrome已在请求中间离开了该页面。发生这种情况是因为 event.preventDefault()尚未在其中一个表单提交处理程序中调用。 Chrome浏览器的处理方式与其他浏览器不同。

The answer had nothing to do with CORS. The request was cancelled because Chrome had navigated away from the page in the middle of the request. This was happening because event.preventDefault() had not been called in one of the form submit handlers. It seems Chrome handles this differently than other browsers.

有关更多详细信息,请参阅上面的答案链接。

See the answer link above for more detail.

这篇关于React / Redux +超级代理,第一次调用终止的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 00:30
查看更多