angular resource POST method turns into options

Question

I`m trying to make a request to an API server with $resource. I want to make a post but angular turns post method into options and give an error like OPTIONS http: / /l ocalhost/API.DWS/api/v1/user/login XMLHttpRequest cannot load http:/ / localhost/API.DWS/api/v1/user/login. Response for preflight has invalid HTTP status code 405

var objectMethods = {
    get: { method: 'GET' },
    update: { method: 'PUT' },
    create: { method: 'POST' },
    remove: { method: 'DELETE' },
    patch: { method: 'PATCH' }
};



var apiUrl = "http://localhost/API.DWS";

angular.module('nurby.version.services', [])
    .config(function ($httpProvider) {
    })



.factory('LoginService', ['$resource', '$http', function ($resource, $http) {
    return $resource(apiUrl + "/api/v1/user/login", {},objectMethods);
}])
.controller('LogInController', ['$scope', '$rootScope', '$location','LoginService', '$http', function ($scope, $rootScope, $location, LoginService, $http) {
    $scope.login = function (model) {
        var loginObject = { Username: model.username, Password: model.password };
      
        
        $http.defaults.useXDomain = true;
        $http.defaults.headers['Content-Type'] = 'application/json';
        $http.defaults.headers['Access-Control-Allow-Origin'] = '*';

        LoginService.create({}, loginObject, function (data) {
            if (data) {
                toastr.success("itworks");
            }
            else {
                toastr.error("not working")
            }
        })

    }

}]);

share some code so I can tell you where exactly you are doing wrong — Kunal Gadhia, Mar 01 '16 at 13:03

score 0 · Answer 1 · answered Mar 01 '16 at 13:18

you can define service.js and use it like below:

var APP_NAME = 'app';

angular.module(APP_NAME).service('WebService', ["$http", function ($http) {
this.login = function (parameters,callbackFunc)
{
    $http({
        url: 'api/login',
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        data: $.param(parameters)
    }).success(function (data) {
        callbackFunc(data);
    }).error(function (data) {
        callbackFunc([]);
    });
};

and use it in your controller like below:

LoginController = ['$scope', '$http', '$location', 'WebService','$window', function ($scope, $http, $location,$WebService,$window) {

$scope.login = function(admin){

    var data = {email:admin.email,password:admin.password};
    $WebService.login(data,function(result){
        if(result.success){
            $window.location.replace("index");
        }
        else{
            $scope.loginError = result.fail;
        }
    });
}

}];

it works but i want to use $resource not $http. Other ideas? — J. Fox, Mar 01 '16 at 13:28
I guess that you can find your answer in here: http://stackoverflow.com/questions/13269882/angularjs-resource-restful-example — Ali SadeghipourKorabaslo, Mar 01 '16 at 13:31
my code worked. there was a problem caused by iis configuration. thanks a lot for yours ideas — J. Fox, Mar 01 '16 at 13:58

score 0 · Answer 2 · answered Mar 01 '16 at 13:25

The problem here is that you are specifying a complete URL beginning "http://localhost/API.DWS" and you haven't loaded the web page from the same domain (maybe you used a different port?).

This means the browser sees your request as a Cross-Domain request. It therefore sends an OPTIONS request first to ask the server whether it will permit you to send the POST. You could configure your server to respond correctly to these requests, or change your code so the web page and the api are on the same domain.

How to configure your server will depend on which server you are running. Search for CORS and your web server and you should find useful information.

score 0 · Answer 3 · answered Mar 01 '16 at 13:25

Inside my controller this worked for me

var resource = $resource(
                "your_api_url",
                {
                    callback: "JSON_CALLBACK"
                },
                {
                    getData: {
                        method: "JSONP",
                        isArray: false
                    }
                }
            );

  function loadRemoteData() {

                $scope.isLoading = true;

                resource.getData().$promise.then(
                    function( friends ) {

                        $scope.isLoading = false;


                    },
                    function( error ) {

                        // If something goes wrong with a JSONP request in AngularJS,
                        // the status code is always reported as a "0". As such, it's
                        // a bit of black-box, programmatically speaking.
                        alert( "Something went wrong!" );

                    }
                );

            }
  $scope.searchResources = function() {
$scope.isLoading = true;

                resource.getData().$promise.then(
                    function( friends ) {

                        $scope.isLoading = false;

                    },
                    function( error ) {

                        // If something goes wrong with a JSONP request in AngularJS,
                        // the status code is always reported as a "0". As such, it's
                        // a bit of black-box, programmatically speaking.
                        alert( "Something went wrong!" );

                    }
                );


  };

angular resource POST method turns into options

3 Answers3