AngularJS发送OPTIONS而不是POST请求

Question

我被困在这里已经两天了，无法找到解决方案。 当我使用AngularJS进行POST时，它会在标题中发送OPTIONS并从API返回错误，代码看起来没有什么特别之处。

$http.defaults.headers.post["Content-Type"] = "application/json";
$http.post(URL, JSON.stringify(data)).
    success(function(data, status, headers, config) {
        alert(data);
    error(function(data, status, headers, config) {
        console.log("Error");
});

API已启用CORS头部。当我使用Fiddler或Chrome中的POSTMan进行POST时，它可以正常工作，但是当我使用angularJS进行POST时，它无法通过。

为什么我会收到“OPTIONS /SubmitTicket HTTP/1.1”而不是“POST”？

我需要做什么才能进行POST？我已经阅读了相关内容，它说CORS会添加OPTIONS标头，但为什么呢？

- AlCode

---

@Mico 再次发送 OPTIONS.. - AlCode

@Mico 我只想发送 JSON 对象并获得一个 JSON 对象作为返回.. :/ - AlCode

不要将数据字符串化... Angular会为您处理这个问题！！$http.post(URL, JSON.stringify(data)). 应该改为 $http.post(URL, data). 不要设置 Content-Type，Angular也会为您处理这个问题... - Callum Linington

@CallumLinington 完全同意。更多信息请参见我的答案中的示例。 - Shian JA

@Orom 我觉得你的代码有一个打字错误，success函数没有关闭。 - Eylen

Answer 1

当您调用 CORS 请求时，浏览器始终会发送 OPTIONS 请求以了解实际允许使用的方法。所以这是期望的行为。这被称为“Preflighted request”，请参见：http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/（章节：“Preflighted requests”）。

因此，在您的情况下，您必须在CORS过滤器的 'Access-Control-Allow-Methods' 头中允许OPTIONS方法。

- Thomas Weglinski

---

我在我的API web配置文件中有以下内容：<add name="Access-Control-Allow-Methods" value="GET, PUT, POST, DELETE, HEAD, OPTIONS" /> 这样足够吗？ - AlCode

可能是。请注意，从安全角度考虑，您必须仅启用实际在API中使用的选项。我通常有GET、PUT、POST和OPTIONS。 - Thomas Weglinski

Answer 2

我的理解是，Angular最初向服务器发送OPTIONS请求，以询问服务器是否允许完整请求。然后，服务器将用头部响应指定允许和不允许的内容。

我猜这可能是服务器返回错误的CORS头部的问题。你说服务器返回了一个错误，请在此处发布该错误。

请参见Preflighted CORS请求：http://www.staticapps.org/articles/cross-domain-requests-with-cors和AngularJS执行跨源资源的OPTIONS HTTP请求。

- Kiachma

---

它只显示错误500，“服务器错误发生”，我该如何处理OPTIONS请求？这是我不理解的东西。 - AlCode

确保API返回以下标头 'Access-Control-Allow-Origin: *' （接受来自所有来源的CORS）或'Access-Control-Allow-Origin：您的客户端地址' - Kiachma

我在设置Go后端API和Angular时遇到了类似的问题。 解决方法是绕过默认请求路由器和分发器来处理OPTION请求。这些是我最终返回的标头Access-Control-Allow-Origin: <origin> Access-Control-Allow-Methods: POST、GET、OPTIONS、PUT、DELETE Access-Control-Allow-Headers: Accept、Content-Type、Content-Length、Accept-Encoding、X-CSRF-Token、Authorization - Kiachma

Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Content-Length,Accept-Encoding,X-CSRF-Token,AuthorizationAccess-Control-Allow-Origin: *Access-Control-Allow-Methods: GET, PUT, POST, DELETE, HEAD, OPTIONS仍然无法工作，你的请求头中是 application/json 吗？还是其他的？ - AlCode

用请求来源的地址替换origin。这与Angular不太相关了，所以我猜你最好去谷歌搜索“<后端类型>预检CORS”，然后使用适当的标签开始一个新问题。 - Kiachma

Answer 3

// 简单的POST请求示例（传递数据）：

$http.post('/someUrl', {msg:'hello word!'}).
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

- Shian JA

---

@Callum Linington 更新了我的示例。 - Shian JA

Answer 4

只需要执行以下代码即可使其正常工作：

angular.module('TestApp', [])
   .factory('someService', ['$http', someService]);

function someService() {
  var service = {
    save: save
  };

  var serviceUrl = '/some/Url';

  return service;

  function save(data) {
    $http.post(serviceUrl, data)
          .success(function(data, status, headers, config) {
              alert(data);
          })
          .error(function(data, status, headers, config) {
              console.log("Error");
          });
  }
}

然后将你的someService引入你的控制器并使用：

someService.save(data);

- Callum Linington

---

var TestApp = angular.module("TestApp", ['ngRoute', 'ngCookies', 'someService']); 这是将其引入控制器的正确方式吗？ - AlCode

嗯，不是很熟悉... 你之前用过Angular吗？ - Callum Linington

var MyController = function ($scope, $http, $location, $cookies, $cookieStore, $interval, $routeParams, someService) 我谷歌了一下，但是现在出现了：未知的提供者：$someServiceProvider <- $someService <- MyController。我做错了什么？ :/ - AlCode

你能不能不展示你的代码？将其放在原始问题中，随意更改客户敏感信息。 - Callum Linington

未知的提供者：someServiceProvider <- someService <- myController，嗯，它们有点敏感，但我会尝试。 - AlCode