I have created this ListFactory
factory('ListFactory', ['$resource', function ($resource) {
// var Chiamate = $resource('http://samedomain.com/file.json', {}, {
var Chiamate = $resource('http://anotherdomain.com/file.json', {}, {
query: {
// method: 'JSONP',
method: 'GET',
isArray: true,
cache : false,
}
});
return {
query: function(id) {
chiamate = Chiamate.query();
return chiamate;
}
};
}]);
in the controller i call the Factory using
$scope.results = ListFactory.query();
and into html i show the results
{{results}}
if i try to download a json file in same domain http://samedomain.com/file.json
using method: 'GET', => ok i see the resource
if i try to download a json file in another domain http://anotherdomain.com/file.json
using method: 'GET', => KO i see this error:
XMLHttpRequest cannot load http://anotherdomain.com/file.json No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://anotherdomain.com/file.json' is therefore not allowed access.
if i try to download a json file in another domain http://anotherdomain.com/file.json
using method: 'JSONP', => KO i don't see any error, but i don't see the result:
i use https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js
Any idea? Can you help me to get json file on another domain?
You will need the co-operation of the remote site for this to work. They need to send a Access-Control-Allow-Origin with your site name, otherwise the browser will throw the error you have seen.
See the following stackoverflow question, which has a more detailed answer
How does Access-Control-Allow-Origin header work?
Related
I was trying to implement facebook integration, I got this error:
XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%3A%2F%2Fchefin.com%2Fauth%2Ffacebook%2Fcallback&client_id=865410220269534. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://chefin.com' is therefore not allowed access.
when I call auth/facebook URL on button click.
$scope.facebookLogin = function() {
$http({
url: '/auth/facebook',
method: 'GET',
}).success(function(response) {
});
};
It seems the /auth/facebook is having a redirect request. So instead of AJAX can you try:
$scope.facebookLogin = function() {
window.location.href = "/auth/facebook";
}
$scope.uploadFiles = function () {
//debugger;
var request = {
method: 'POST',
url: 'http://localhost/upload/',
data: formdata,
headers: {
'Content-Type': undefined
}
};
// SEND THE FILES.
$http(request)
.success(function (d) {
alert(d);
})
.error(function () {
});
}
i am getting in console window like
XMLHttpRequest cannot load http://localhost/upload/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:55555' is therefore not allowed access. The response had HTTP status code 405.
If I understand this correctly, the app is running at http://localhost:55555 and you are trying to send a POST request to http://localhost/upload/ (which really means http://localhost:80/upload/). Your browser is not allowing you to do this since http://localhost:80/ and http://localhost:55555/ are different origins.
Perhaps you meant to say http://localhost:55555/upload/? This would solve your issue.
Otherwise you need to disable CORS in your browser or add the 'Access-Control-Allow-Origin: * header in your server at http://localhost:80/.
I am using http-auth-interceptor for authentication. In http-auth-interceptor, I use the following way to login:
var data = 'username=' + encodeURIComponent(user.userId) + '&password=' + encodeURIComponent(user.password);
$http.post('api/authenticate', data, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
ignoreAuthModule: 'ignoreAuthModule'
})
ignoreAuthModule is used to tell ignoreAuthModule that this login method will be ignored by the auth interceptor.
Now, I have some request with $resource, like:
.factory('SomeDataService', function ($resource) {
return $resource('api/some/data', {}, {
'get': { method: 'GET'}
});
})
I want SomeDataService.get() is also ignored by the auth interceptors, because I need to control the 401 error by myself.
So, my question is, is there any way for ngResource that I can set config like that in $http.
[update based on comment]
I have listened the login-required event:
$rootScope.$on('event:auth-loginRequired', function (rejection) {
$log.log(rejection);
// I need to get the request url and for some specific url, need to do something.
$rootScope.loginPopup();
});
But the 'rejection' parameter has no context data of request I need. I need to get the request url and check, for some specified url, I need to do something.
After checking the document of ngResource, I got the solution as below:
.factory('SomeDataService', function ($resource) {
return $resource('api/some/data', {}, {
'get': { method: 'GET', ignoreAuthModule: 'ignoreAuthModule'}
});
})
Just add the config item as above. It will be equivalent ad:
$http.post('api/some/data', data, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
ignoreAuthModule: 'ignoreAuthModule'
})
ngResource module is build on top of $http.Hence it is not possible to configure all the stuffs you can do with $http in $resource.I think the below link will be guide you to have a clear understanding on $http and $resource
Hi I am new to Angular JS, I am trying to put custom header in my $resource method, but I am not sure how would I do that
Following is my code :
function userFactory($resource, API) {
return $resource(API + '/users/:cmd', {}, {}, {
login: {method: 'GET', params: {cmd: 'current'}, headers: headerParam},
get: {method: 'GET'},
create: {method: 'POST'}
}
);
I would like to add a custom header 'headerParam' based on which user has logged in since the header would contain username and password specific details.
As I look at the header documentation in $http.config. This is map of string\ function, which implies you can call a function to set specific header
Something like
headers:{credentials: getUserCredentials}
And in the factory you can create the above method.
var getUserCredentials = function(config) {
}
I have not tried, see if it helps.
I'm attempting add an edge to my Titan Server 0.4.4 graph using an AngularJS resource. The resource looks like this:
'use strict';
angular.module('storymapApp').factory('edgeResource', function ($resource) {
var EdgeResource = $resource('http://localhost:8182/graphs/graph/edges?_outV=:outId&label=:label&_inV=:inId', {outId: "#outId", inId: "#inId", label: "#label"}, {
update: {method: 'PUT', isArray: false},
outedge: {method: 'POST',
transformResponse: function(data, headers){
// deserialize the JSON response string
data = angular.fromJson(data);
data = data.results;
return data;
},
isArray: true}
});
return EdgeResource;
});
This code generates a POST like this:
http://localhost:8182/graphs/graph/edges?_outV=120028&label=contains&_inV=160076
which returns the following 500 error message:
{"message":"An error occurred while generating the response object","error":"Edge cannot be found or created. Please check the format of the request."}
Where is the formatting issue in the request?
Can you change your angularjs code to POST the request as JSON (instead of formatting the parameters to query string)? Set your Content-Type to application/json as well (though angular may be doing that for you already. Those things should fix your problem.