Angular 和 jquery 中的 OPTIONS 请求答案

【问题标题】：OPTIONS request in angular and jqueryAngular 和 jquery 中的 OPTIONS 请求
【发布时间】：2016-01-24 21:15:23
【问题描述】：

我有一个奇怪的问题发生在我身上，这让我很困惑。我正在使用 AngularJS 开发一个前端网站，该网站连接到使用 OAuth 身份验证协议的服务器。为了实现这一点，我四处浏览并遇到了包含 OAuth 请求的angular-auth2。

我做了一个登录控制器来处理用户登录，它依赖于angular-auth2的OAuth服务：

angular.module('myApp')
.controller('LoginController', function($scope, OAuth) {
  $scope.login = function() {
    var username = $scope.username;
    var password = $scope.password;

    return OAuth.getAccessToken({
      username: username,
      password: password
    }).then(function() {
      console.log(arguments);
    }, function() {
      console.log('ERORRRRRRRRRR!!!!!');
      console.log(arguments);
    });
  };
});

我正在从我的视图中调用登录方法，如下所示：

<form>
  username: <input type="text" ng-model="username"><br />
  password: <input type="password" ng-model="password"><br />
  <button ng-click="login()">Login</button>
</form>

当我第一次单击具有正确凭据的登录按钮时，angular-auth2 会向服务器创建 POST 请求并将响应存储在 cookie 中，但每当我尝试在之后发出任何其他请求时，@987654327 @ 请求前面有一个 OPTIONS 请求，该请求失败并显示错误代码 400 和 Bad Request 错误消息，如果我删除 cookie，我不会收到 OPTIONS 请求，一切正常。

令人困惑的部分是我尝试使用 jQuery 发出这些请求，而我能够在没有 OPTIONS 请求的情况下发送 POST 请求。

这是我的 jQuery 代码：

function login(username, password, client_id, apiUrl, successCallback, errorCallback) {
    $.ajax(apiUrl, {
        data: {
            'grant_type': 'password',
            'client_id': client_id,
            'username': username,
            'password': password
        },
        success: function (data) {
            successCallback(data);
        },
        error: function (data) {
            errorCallback(data);
        },
        method: 'POST',
    });
};

现在我被我的这个问题困住了，并且对何时发送OPTIONS 请求以及何时不发送感到困惑。

【问题讨论】：

您可能需要查看 CORS。 OPTIONS 请求在大多数 CORS 请求之前。

标签： jquery angularjs oauth cross-browser xmlhttprequest

【解决方案1】：

预检 OPTIONS 请求不是角度问题，而是 XMLHttpRequest 实现的一部分。

复杂的跨域 HTTP 请求需要 pre-flight OPTIONS 请求，以便浏览器可以确定其他服务器是否会授予 Ajax 请求的权限

确保您发出的 Ajax 请求很简单，没有办法阻止 OPTIONS 请求。

一个简单的请求：

仅使用 GET、HEAD 或 POST。如果使用 POST 向服务器发送数据，则通过 HTTP POST 请求发送给服务器的数据的 Content-Type 为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 之一. 不使用 HTTP 请求设置自定义标头（如 X-Modified 等）

来源：https://stackoverflow.com/a/24656672/128129

例如，如果您使用 JSON 编码的主体执行 POST 请求，它将被视为复杂请求 - 因此需要飞行前选项请求。

【讨论】：