Question

我在Reflux商店中有以下AJAX调用：

$.ajax({
  url: 'submit.php',
  context: this,
  method: 'POST',
  dataType: 'json',
  success: function(data){...},
  error: function(jqXHR, textStatus, error){...}
});

以下是我的路线：

let browserHistory = createBrowserHistory();
ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={About} />

      <Route path="about" component={About} />
      <Route path="leaderboards" component={LeaderboardPage} />
      <Route path="profile" component={Profile} />
      <Route path="validate/:projectName" component={Validate} />
    </Route>
  </Router>
), document.getElementById('app'));

每当Validate组件要求其商店发出AJAX请求时，都会向validate/submit.php而不是submit.php发出请求。发生了什么事？

Answer 1

由于您只向$.ajax提供文件名而不是绝对路径或URL，因此浏览器将其用作相对URL。由于当前页面的网址路径为/validate/foo（更不用说它由history.pushState设置;浏览器没有区别），它假设您要请求submit.php亲戚到那条路径，即/validate/submit.php。

在浏览器中发出请求时，您应始终使用绝对路径或完整URL，例如：

$.ajax({
  url: '/submit.php',
  // ...
});

React Router导致Reflux存储中的AJAX调用失败

1 个答案: