I am calling a restful sharepoint 2010 service via Angular JS as following but when I run the application I always get the "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access." error.
NOTE: If I try the same GET method from my local machine via Chrome POSTMAN tool the same call works. What am I doing wrong?
var myApp = angular.module('MyApp', []);
myApp.config(function($httpProvider) {
//Enable cross domain calls
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
myApp.controller('MYCtrl', function($scope, $http) {
var site = 'http://inside.company.net/it/gsst/private/_vti_bin/listdata.svc/CCPMGAST';
$http({
method: 'GET',
withCredentials: true,
url: site,
headers: { "Accept": "application/json; odata=verbose" }
}).success(function (data, status, headers, config) {
$scope.getCallJSONResult = data;
}).error(function (data, status, headers, config) {
$scope.getCallJSONResult = "Get error";
});
});
Related
I have a problem with angular $http get with Authorization header.
I tried to excute the same request with different rest client and response are the same each one.
Advanced Rest Client Chrome extension
Soap-Ui
Insomnia
I have always received the same response with 200 status code.
but when I try to make the same call from my angular application I get 403 status code and response is an OPTIONS.
where I'm wrong?
this is my code:
Config
app.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.headers.common['Authorization']='Bearer 24ac24e6-0f9b-48b5-923f-b75986226bd9';
});
Service
app.service('DiscoveryService', function ($http) {
this.getData = function (callbackFunc) {
$http({
url: 'https://test.test/test-api/source-monitor/v1/discover',
method: 'GET',
headers: {
"Content-Type": "application/json"
}
}).success(function (response) {
console.log(response);
}).error(function (error) {
console.log(response);
});
};
});
Controller
DiscoveryService.getData(function (dataResponse) {
$scope.data = dataResponse;
});
This is my code
$http.jsonp("http://admin.mlbmcjhs.com/api/Department?&callback=JSON_CALLBACK").success(function (data, status) {
$scope.Departments = data;
alert(data);
}).error(function (data,status) {
alert(status);
});
web api is working fine in browser console
and returning data
but in angularjs it jumps to error() and returning 404
You might be getting a CORS error. I've tested from Plunker (http://plnkr.co/edit/q3DVia?p=info)
var url = "http://admin.mlbmcjhs.com/api/Department?&callback=JSON_CALLBACK";
$http({
url: url,
method: "GET",
headers: {
'Content-Type': 'application/JSON'
},
}).success(function(response, status, headers, config, statusText) {
vm.Departments = data;
vm.status = status;
vm.headers = headers();
}).error(function(response, status, headers, config, statusText) {
vm.status = status;
vm.headers = headers();
});
, and I get a CORS error. You will probably need to enable CORS on your webApi.
I am making an angular http post to an API which like this
$http({
method: 'POST',
url: 'http://api/ClientEndpoint',
data: register,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
transformRequest: function (obj) {
var str = [];
for (var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
}
}).error(function (data, status, headers, config) {
alert(data);
});
which is returning the following response
But I am not able to store the response path in a variable. How can I do that?
It is cross domain scenario and this is the response being showed in chrome console
I want to access store the ClientEndpoint value
Did you forget the .success(function (data) { }) callback ? just like the .error() you put after the http() function
i hope this will solve your problem ;)
Use the headers variable in either your .succes(response, headers) or .error(response, headers).
E.g :
.success(function(data, status, headers, config) {
//Success Handling
});
.error(function(data, status, headers, config) {
//Error Handeling
});
This only works if you are on the same domain as the server, if it's cross domain, the server has to send the Access-Control-Expose-Headers for you to make this work.
I am trying to send the post request with json data to server. But seems angularJS $http.post method does not set the data into body. How can I make it set the data into body?
The remote server is implemented use asp.net webapi and will read the data from body. so I need to set the json data into request body.
How can I implement this please? Thanks.
If the request send to same site, then it works. But if I send the request to CROS server, it does not work.
In the remote backend server, I already updated the webconfig to make it support CROS call, but it still does not work.
$http.post(resourceUri, requestData)
.success(function (response) {
})
.error(function (data, status, header, config) {
});
You could build the request like this:
var req = {
method: 'POST',
url: 'http://example.com',
headers: {
'Content-Type': "application/json"
},
data: { test: 'test' }
}
$http(req).success(function(){...}).error(function(){...});
YOu can do it as follows
1. make a controller
2. make a add data to the call
syntax for the post call is as follows
$http.post(url, data, [config])
app.controller('controller', function ($scope, $http, $routeParams) {
$http.post('url',data.call1($routeParams.id))
.success(function (response) {
$scope.response = response;
})
.error(function (data, status, headers, config) {
});
});
var data = {
call1:
function (value) {
return {'key': value, 'key': 'some text'};
}
}
I am developing mobile application in cordova/phonegap. I am using angularJS for front-end. I am calling services which required 'API-KEY' attribute as header in post request.
I show some documentations, and tried with those way. but not worked.
postServiceDataWithHeader: function (url, data) {
var deferred = $q.defer();
var req = {
method: 'POST',
url: url,
data: JSON.stringify(data),
headers: {
'user-Token': $rootScope.user.APIKEY,
'content-Type': 'Application/Json'
}
}
$http(req).success(function (data) {
deferred.resolve(data);
}).error(function (data, status, headers, config) {
alert("Server failed to save data");
deferred.reject(status);
});
return deferred.promise;
}
I tried to add headers in call with,
JodoModule.config(function ($routeProvider, $httpProvider) {
$httpProvider.defaults.headers.post['user-Token'] = 'finding???';
$httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
});
and second approach was,
JodoModule.run(['$rootScope', '$http', function ($rootScope, $http) {
$http.defaults.headers.common.Authorization = 'Basic YmVlcDpib29w';
}]);
I am able to call services, but on server side, I am not getting header values, even in fiddler also headers are not passed.
What is the reason ? Do I need to add anything else in code for passing headers for each POST request. ?
I've made working plunker for you using one of yours approach
http://plnkr.co/edit/36Dq6UXgyeMEXOzycrua?p=preview
app.config(function ( $httpProvider) {
$httpProvider.defaults.headers.post['User-Token'] = 'finding???';
$httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
});
Although if it's CORS you have to add 'User-Token' to accepted headers
i.e. for apache2
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "origin, user-token, x-requested-with, content-type"
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"