Angular $http.post to retrieve JWT
<p>I am attempting to make my code more reusable, but have come across a problem when making <code>$http</code> calls, if I use my normal way:</p>

<pre><code>vm.loginUser = function () {
  var userData = {
    username: vm.userName,
    password: vm.userPassword,
    grant_type: "password",
    client_id: "E0..."
  };
  console.log('userData: ', userData);
  var config = {
    headers: {"Content-Type": "application/x-www-form-urlencoded"},
    transformRequest: function (data) {
      var str = [];
      for (var d in data)
        if (data.hasOwnProperty(d)) str.push(encodeURIComponent(d) + "=" + encodeURIComponent(data[d]));
      return str.join("&amp;");
    }
  };
  console.log('config: ', config);
  $http.post('https://a.n.org.uk/token', userData, config)
    .then(function (response) {
      console.log('Button clicked: ', response);
    }, function (response) {
      console.log(response.data.error_description);
    }, function (response) {
      console.log(response.data);
    });   
</code></pre>

<p>This works fine and doesn't give me any problems. I have made a <code>factory</code> that is basically the same but doesn't seem to work with giving me <code>OPTIONS</code> error in the console and <code>preflight check... No 'Access-Control-Allow-Origin' header'</code>I wondered if this is a simple fix, I am using Web API.</p>

<pre><code>factory("homeResource", function ($http, $q) {
  return {
    getUser: getUser
  };

  function getUser(userData) {
    var request = $http({
      method: "post",
      url: "https://a.n.org.uk/token",
      data: userData,
      config: {
        headers: {"Content-Type": "application/x-www-form-urlencoded"},
        transformRequest: function (data) {
          var str = [];
          for (var d in data)
            if (data.hasOwnProperty(d)) str.push(encodeURIComponent(d) + "=" + encodeURIComponent(data[d]));
          return str.join("&amp;");
        }
      }
    });

    return (request.then(handleSuccess, handleError));
  }

  function handleSuccess(response) {
    return ( response.data );
  }
</code></pre>

<p>In my <code>Ctrl page</code> I pass in my <code>homeResource</code> and call it like so <code>homeResource.getUser(userData).then(function (res) {console.log(res);});</code> and get the errors mentioned. Is there a way to make this work?</p>