I'm trying to making jsonp call using below code but doesn't seems to be working for me.
Code
var url = 'http://z:15957/Category/Categories?callback=JSON_CALLBACK';
$http.jsonp(url).success(function (data) {
$scope.results = data.feed.entry;
});
Any help would appreciated.
This issue appears to be with your CORS (Cross Origin Resource Sharing) issue. Your .success callback will not fire after making this call, but .error will. See the working example with the valid URL and see the .success callback executed successfully.
JSFiddle Link
var url = 'http://z:15957/Category/Categories?callback=JSON_CALLBACK';
// valid URL example
//url = 'http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK'
$http.jsonp(url)
.success(function (data) {
console.log(data);
}).error(function (data, status, headers, config) {
console.log('error');
});
Related
What is wrong with this code:
function mainCtrl($scope, $http) {
function loadData(){ $http.jsonp('http://www.pais.co.il/Lotto/Pages/last_Results.aspx?download=1')
.then(function (data, status, headers, config) {
console.log(data);
},
function (data, status, headers, config) {
console.log(data);
});
}
loadData();
};
I have a simple call to a URL.
I can see in my network that it was a success (200).
But my the response is beeing catch in the error function:
You aren't getting a 404 error. You are getting an invalid JS error.
You are making a JSONP request. The URL is returning CSV data, not JSONP.
You need to either:
Use a URL that returns JSONP
Use XMLHttpRequest instead of <script> (which is what $http.jsonp does behind the scenes) to load the data and ensure that the suitable Access-Control headers are set to give your JS permission to read the data
Fetch the data from your server instead
I got this page which uses Angular and when the page is loaded, it requests some data from a HTTP get call. My problem is that if the user navigates to a other page while the HTTP get call is going on, the system gives a error and then gives me the HTTP error callback showing the alert with "Error".
$http.get('/api/something/).success(function (data, status, headers, config) {
alert(data);
}).error(function (data, status, headers, config) {
alert('Error');
});
What I want instead is to just abort the http call and then move the user to the other page without the error function being called.
So far I found this.
But I can't see how I can use it to fix my problem.
Im stuck at this 2 days I can not find a solution.
When im doing an AngularJS POST it Sends OPTIONS in the header and returns error from the API the code looks like this nothing special.
$http.defaults.headers.post["Content-Type"] = "application/json";
$http.post(URL, JSON.stringify(data)).
success(function(data, status, headers, config) {
alert(data);
error(function(data, status, headers, config) {
console.log("Error");
});
CORS is enabled on the API it has the Headers, when i do POST with fiddler or POSTMan in Chrome it works fine only when i use angularJS post it won't go thru.
why do i get OPTIONS /SubmitTicket HTTP/1.1 instead of POST?
What do i need to do to POST ? I have read about it it says something like CORS is adding OPTIONS header but why?
When you invoke the CORS requests, the browser always sends the OPTIONS request to server to know what methods are actually allowed. So this is the desired behaviour. This is so called: "Preflighted request", see: http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/ (section: "Preflighted requests")
Therefore in your case, you have to allow the OPTIONS method in 'Access-Control-Allow-Methods' header of your CORS filter.
My understanding is that angular initially sends an OPTIONS request to the server in order to ask the server if the full request is permissable.
The server will then respond with Headers specifying what is and is not allowed.
I guess this might be an issue with the server returning the wrong CORS headers.
You said that the server returns an error please post that error here.
See Preflighted CORS request at: http://www.staticapps.org/articles/cross-domain-requests-with-cors
and
AngularJS performs an OPTIONS HTTP request for a cross-origin resource
// Simple POST request example (passing data) :
$http.post('/someUrl', {msg:'hello word!'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Should only need to do this code to get it to work:
angular.module('TestApp', [])
.factory('someService', ['$http', someService]);
function someService() {
var service = {
save: save
};
var serviceUrl = '/some/Url';
return service;
function save(data) {
$http.post(serviceUrl, data)
.success(function(data, status, headers, config) {
alert(data);
})
.error(function(data, status, headers, config) {
console.log("Error");
});
}
}
Then pull your someService into your controller and use:
someService.save(data);
I need to do a Cross Domain Request using Angular, but I got the error
XMLHttpRequest cannot load http://machine_name_in_my_network:8082/GetAll. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:53379' is therefore not allowed
access. The response had HTTP status code 500.
I saw here a solution sample, but doesn't worked for me.
This is a request from my localhost to a machine in my network and should return a JSON.
Code Snippet
//Controller
function crmContatosCtrl($scope, apiService) {
apiService.get('/GetAll').then(function (data) {
$scope.contatos = data;
});
and then comes to my service
function comWebApi_Service($http, $log) {
return {
get: function (url, data) {
//return $http.jsonp(ApiURL + url)
// .success(function (data) {
// debugger;
// })
// .error(function (data) {
// debugger;
// });
return $http.get(ApiURL + url, data).then(
function (res) {
return res.data;
});
},
angular
.module('app')
.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}])
.service('apiService', comWebApi_Service);
you need to enable cors on server
e.g. to init it globally
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
read more about it here... read section Scope Rules for [EnableCors]
This is missing code on the server side, not in your browser AngularJS code. You do not need either of these lines with recent angularjs builds. These are both based on outdated information (They won't break anything, they are just unnecessary and based on outdated copypasta):
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
Your server code needs to add the necessary CORS headers to its HTTP responses, so ask the maintainer to do so or post server side snippets and we can help with that.
I am accessing a REST Service that returns a JSON back. The JSON response is of the format
JQUERY_1234({ABC:[]}).
Using angularJS and IE9 as the browser, I get an error that says SCRIPT 5009: 'JQUERY_1234' is undefined. I am new to angular JS and would appreciate some guidance on where I am going wrong.
The same code works for another URL but fails on this one. Thanks for your help!
My controller code is:
var myNameSpace=angular.module('myApp',[]);
myNameSpace.controller('MyController',function MyController($scope,$http){
$http.jsonp('URL').success(function(data) {
$scope.artists = data;
})
.error(function (data, status, headers, config) {
alert("error:" + status);
return status;
});
$scope.orderAlerts='Name';
});
The URL string that is used for the JSON needs to have the parameter callback="JSON_CALLBACK". It is a mandatory parameter for http.jsonp