为什么在Chrome网络选项卡中，Angular AJAX请求会显示两次？

Question

我刚刚注意到，当我使用Angular（1.4.8）进行AJAX POST请求时，在Chrome网络选项卡中会出现两次可见（第一次（355B）为angular.js:10765，第二次（812B）为other，其中第一次看起来像请求，第二次作为响应 - 只有第二个包含响应数据）。

我使用jQuery进行相同的请求，并且它只显示为单个请求（812B）。

代码：

return function ( id ) {
  var deferred = $q.defer()
    , data = {
      id: id || null,
      range: tbDateRange.get( true )
    }
    ;

  /* TODO - REMOVE */
  $.ajax({
    method: 'POST',
    url: path,
    dataType: 'JSON',
    data: data
  });

  $http.post( path, data )
    .success( function ( data ) {
      /*...*/
      deferred.resolve( data );
    } )
    .error( function ( error ) {
      /*...*/
    } );
  return deferred.promise;
};

以下是网络选项卡的截图：

- LJ Wadowski

Answer 1

Angular默认将数据以JSON格式POST而不是表单编码的数据（jQuery则不会，因此“我使用jQuery进行了相同的请求”这个说法是不正确的）。

跨域、JSON格式的POST请求需要进行预检OPTIONS请求。

由于您没有展示任何请求细节（除了它们要访问的URL末尾），所以第一个请求很可能就是预检OPTIONS请求。

- Quentin

---

是的，一切都正确。我在头部找到了“请求方法：OPTIONS”。谢谢。 - LJ Wadowski