Question

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

我的动作创建者看起来像

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

它击中了中间件逻辑：

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

即使呼叫终止，查询也是正确的，我收到了这个错误消息：

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)

每次页面都会刷新。

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

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

Answer 1

遇到同样的问题，感谢主题answer provided by @KietIG上的ReactJS with React Router - strange routing behaviour on Chrome。

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

请参阅上面的答案链接了解更多详情。

Answer 2

在我的情况下，当我尝试在客户端设置随机HTTP请求标头（如X-Test）并且AWS Lambda在OPTIONS请求期间拒绝它或其他事情时，就会发生这种情况。

Answer 3

我不知道副作用，但是你得到了CORS错误。将.withCredentials()方法添加到您的请求中。

来自superagent docs：

.withCredentials（）方法可以从中发送cookie 但是只有当“Access-Control-Allow-Origin”不是a时通配符（“*”）和“Access-Control-Allow-Credentials”为“true”。

这应该解决它：

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

可以找到有关跨源资源共享的更多信息here。

React / Redux +超级代理，第一次调用终止

3 个答案: