angular resource POST method turns into options - angularjs

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

Answer 1

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

Answer 2

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.

Answer 3

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