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

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。由于当前页面的 URL 路径是 /validate/foo(不要介意它是由 history.pushState 设置的；浏览器没有区别)，它假定您想要请求相对于该路径的 submit.php，即 /validate/submit.php。

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

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