OPTIONS request in angular and jquery

Question

I have this weird issue that is happening to me which is confusing me. I'm developing a frontend website using AngularJS which connects to a server that is using OAuth authentication protocol. to achieve that I was surfing around and came across angular-auth2 that wraps the OAuth requests.

I made a login controller to handle user login and it depends on angular-auth2's OAuth service:

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);
    });
  };
});

and I am calling the login method from my view like this:

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

When I click the login button with correct credentials for the first time the angular-auth2 creates a POST request to the server and stores the response in a cookie, but whenever I try to make any other request afterwards the POST request gets preceded with an OPTIONS request which fails with error code 400 and error message of Bad Request and if I delete the cookie I don't get an OPTIONS request and everything works fine.

The confusing part is I tried to make these requests with jQuery and I was able to send POST requests without the OPTIONS request at all.

here is my jQuery code:

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',
    });
};

Now I am stuck with this problem of mine, and also got confused of when the OPTIONS request is sent and when it is not.

You may want to look into CORS. OPTIONS requests precede most CORS requests. — Anid Monsur, Oct 25 '15 at 20:10

score 0 · Answer 1 · edited May 23 '17 at 12:23

The preflight OPTIONS request is not an angular-thing but rather a part of the implementation of XMLHttpRequest.

Complex cross-origin HTTP requests require a pre-flight OPTIONS request so the browser can find out if the other server will grant permission for the Ajax request

Short of making sure the Ajax request you are making is simple, there is no way to prevent the OPTIONS request.

A simple request:

Only uses GET, HEAD or POST. If POST is used to send data to the server, the Content-Type of the data sent to the server with the HTTP POST request is one of application/x-www-form-urlencoded, multipart/form-data, or text/plain. Does not set custom headers with the HTTP Request (such as X-Modified, etc.)

source: https://stackoverflow.com/a/24656672/128129

For instance if you do a POST-request with JSON-encoded body it will be considered a complex request - and thus require a pre-flight options request.

OPTIONS request in angular and jquery

1 Answers1