angularjs basic authentication headers - angularjs

I'm trying to connect to API and send authentication headers.
I'm using Base64 as described here How do I get basic auth working in angularjs?
function Cntrl($scope, $http, Base64) {
$http.defaults.headers.common['Authorization'] = 'Basic ' + Base64.encode('----myusername----' + ':' + '----mypass---');
$http({method: 'GET', url: 'https://.../Category.json'}).
success(function(data, status, headers, config) {
console.log('success');
}).
error(function(data, status, headers, config) {
alert(data);
});
}
but i'm getting this error
XMLHttpRequest cannot load https://.../Category.json?callback=?. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://....com' is therefore not allowed access. The response had HTTP status code 400.

Looks like you are running into issues with Cross-Origin Resource Sharing (CORS). Have a read of:
How does Access-Control-Allow-Origin header work?
If you control the server then you can have it send back an appropriate Access-Control-Allow-Origin header as per what the server code in the question you referenced (How do I get basic auth working in angularjs?)

Related

how to remove Access-Control-Allow-Origin angular application while Getting Data?

After payment gateway success it redirect to http://localhost/august1stZustshop/#/home.In response headers i got information data,status accurately.
But Using $https it makes XMLHttpRequest cannot load https://secure.payu.in/_payment.
No 'Access- Control-Allow-Origin' header is present on the requested resource.Origin
'http://localhost' is therefore not allowed access.
$http({
url: "https://secure.payu.in/_payment",
method: "GET",
}).success(function(data, status, headers, config) {
console.log(data)
console.log(status)
}).error(function(data, status, headers, config) {
$scope.status = status;
console.log(status)
console.log(data)
})
Please tell me how to get the response headers data or how to remove cors error.

Not able to POST data to RESTFul service from AngularJS

Hope some one can help me here.
I am trying to POST a JOSN data to restful service. But am getting below error.
Error:
XMLHttpRequest cannot load http://localhost:8080/PortalService/rest/PutService/PutLogicalTeam. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.
This is how i am invoking the service
$http.post('http://localhost:8080/PortalService/rest/PutService/PutLogicalTeam', $scope.strLogiTeam
).success(function(data, status, headers, config) {
console.log("success");
}).error(function(data, status, headers, config) {
// Handle error
console.log(status);
});
My service.
I am not even trying to pull the data. I am just trying to check whether my service is getting invoked or not.
#POST
#Consumes("application/json")
#Path("/PutLogicalTeam")
public void putNewLogicalTeam(LogicalTeam newLogicalTeam)
{
System.out.println("Invoked");
}
I also tried like below
$http({
method: 'POST',
dataType: 'jsonp',
data: $scope.strLogiTeam,
url:'http://localhost:8080/PortalService/rest/PutService/PutLogicalTeam',
headers: {'Content-Type':'application/json'}
});
Can some one review and help. Also suggest the better way to use the web service

Angular Authorization header is null on CROSS DOMAIN API call. Why?

I have an Angular (1.3.8) SPA with a factory method that is attempting to add a basic authorization header before making a cross-domain API call.
The API is an ASPNET WEB API but has CORS totally enabled. The API is using basic auth message handler
The problem is that in the first call to the API there is no AUTHORIZATION header at all even though the code making the API call looks like this:
$http.defaults.headers.common.Authorization = 'Basic blah...';
$http.get('http://my-webapi-url').
success(function(data, status, headers, config) {
...
}).
error(function(data, status, headers, config) {
alert('error ' + status);
});
The API is not receiving an AUTHORIZATION on the initial call, and is rejecting the call with 401 of course. Why isn't there an AUTH header from the start?

Getting JSON data using Angular JS's $http service

I need to get JSON data from a server with URL :
http://xxxx.xxxx.xxxx.xxxx:8084/inpulse/api/user/listall
Here's my angular code:
var app = angular.module('app',[]);
app.controller('Controller', function ($scope,$http) {
$scope.email="";
$scope.password="";
$scope.sample="";
$http({
method: 'GET',
url: 'http://xxxx.xxxx.xxxx.xxxx/inpulse/api/user/listall',
})
.success(function (data, status, headers, config) {
var ret = data;
$scope.sample = JSON.stringify(ret);
})
.error(function (data, status, headers, config) {
alert(status);
// something went wrong :(
});
});
Now the same code worked when i used a JSON test URL like http://ip.jsontest.com/.
Its Definitely not a problem with the server because I tested it with a REST client and got a response. I can't figure out what I'm doing wrong.
It might be a CORS configuration issue.
If you are trying to access the server from a page that is not in the same domain/origin, you'll get an error because the server is not configured to allow CORS.
The error reported by Chrome looks like this:
XMLHttpRequest cannot load http://xxxx.xxxx.xxxx.xxxx/inpulse/api/user/listall. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.
Other than that the code seems to work just as expected.

HTTP Basic Authorization header in request using AngularJS?

I am trying to use AngularJS with an external API. The API uses HTTP Basic for authentication.
I have looked around at how to do this but nothing seems to work. The OPTIONS request is always sent without the Authorization header.
Here is some example code:
var app = angular.module("BE", []);
app.controller("NextCtrl", function ($scope, $http) {
$http.defaults.headers.common['Authorization'] = 'Basic encoded_credentials';
$http.get('http://api-url.com').
success(function(data, status, headers) {
$scope.event = data.Event;
$scope.race = data.Race;
$scope.entrants = data.Entrants
}).
error(function(data, status, headers, config) {
// log error
});
});
How can I make my requests with the Authorization header set for every request?
You can't control that because OPTIONS is sent by a browser. A browser removes any authorization data in OPTION requests (see CORS W3C Recommendation).
In most cases Authorization header for OPTIONS-requests isn't needed because the response includes only CORS headers and doesn't perform any action.

Resources