I have a Https url and want to send request to get data from that URL , scenario 1:
from my browser If I hit the Url i get the response whereas from my Angularjs App I get always an error 401 , but if I hit the Api from browser I always get the correct response
for security reasons I couldn't use Url here but what I want is to:
$http({
method: "GET",
url: "https://urlAdresss/",
headers: {
"Accept-Language": "en-US, en;q=0.8",
"Content-Type": "application/json;charset=UTF-8"
},
}).then(function (_response) {
console.log(_response
}
I always get unauthorized I am network as well as On console any help will be greatly appreciated ,
but If I hit the same Url from browser I get the response It means the backend is working fine
I think I am missing something in my get request that's why getting the error
It seems a CORS (Cross-Origin Resource Sharing) issue.
In AngularJS side, you should use the following configuration in order for $http service to automatically send authorization headers to http requests.
var app = angular.module('app', [])
.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.withCredentials = true;
});
And in backend you should specify explicitly allowed origins (eg. http://localhost:8888).
Also, note some points from here.
If you want to allow credentials then your Access-Control-Allow-Origin must not use *.
Related
I would like to understand why the AngularJS $http service doesn't work and the fetch API works.
Below is the AngularJS code:
const $http = angular.element(document.body).injector().get('$http')
$http({
method: 'GET',
url: 'http://192.168.1.126:8080/saiku/rest/saiku/admin/datasources/',
headers: {
'Authorization': 'Basic YWRtaW46YWRtaW4='
}
})
This gives me this error:
angular.js:12845 OPTIONS http://192.168.1.126:8080/saiku/rest/saiku/admin/datasources/ 403 ()
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access. The response had HTTP status code 403.
The weird part is that this:
fetch('http://192.168.1.126:8080/saiku/rest/saiku/admin/datasources/', {
method: 'GET',
headers: {
'Authorization': 'Basic YWRtaW46YWRtaW4='
}
}).then((r) => r.json()).then(console.log)
Gives me the correct response
I know this could be a CORS error, but i've added the CORS filter on my tomcat so everything should work (and fetch works).
Is this a bug in fetch or $http?
While i was writing this question i found the answer:
On my AngularJS app, there was a config file that was setting this:
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
And this (along with other headers), makes the request a preflighted one, as peer the CORS documentation:
[...] Apart from the headers set automatically by the user agent (for
example, Connection, User-Agent, or any of the other header with a
name defined in the Fetch spec as a “forbidden header name”), the
request includes any headers other than those which the Fetch spec
defines as being a “CORS-safelisted request-header”, which are the
following:
Accept Accept-Language
Content-Language
Content-Type (but note the additional requirements below)
Last-Event-ID
DPR
Save-Data
Viewport-Width
Width
So the fetch API worked because it wasn't setting that (If-Modified-Since) header, and the $http service was.
I am trying to debug my angular app with chrome dev console.I want to send a get request to a local server from angular. I've tried the following:
$http = angular.element($0).injector().get('$http');
$base64 = angular.element($0).injector().get('$base64');
var auth = $base64.encode("user:passwd");
var authHeaders = {"Authorization": "Basic " + auth,"Access-Control-Allow-Origin":"*"};
$http.get("url",{headers:authHeaders,method:"GET"})
After reading this answer:
https://stackoverflow.com/a/30296149/1496826
I thought that custom header is the problem. So, I tried putting the authorization headers in the body:
$http.get("url",{data: {"Authorization": "Basic " + auth,"Access-Control-Allow-Origin":"*"},method:"GET"})
But I am still getting the same error:
XMLHttpRequest cannot load "url". No 'Access-Control-Allow-Origin'
header is present on the requested resource. Origin 'null' is
therefore not allowed access. The response had HTTP status code 401.
This same get request works fine from Postman:
var settings = {
"async": true,
"crossDomain": true,
"url": "url",
"method": "GET",
"headers": {
"authorization": "Basic bWdhcasdasd",
"cache-control": "no-cache",
"postman-token": "XXXXXX-XXXXXX-xXXXX-xXXXX"
}
}
I have tried several other variation like - $http default / common header etc. but everything failed. Please help.
this is a CORS issue.
CORS headers must be handled server side, i don't see your server side code here but in order to let this error disappear you must specify which domain are allowed to request resources.
the exception is caused by the browser that intercept the server response check the headers and if it doesn't find the Allow-Control-Allow-Origin header it won't forward the response to your code (this happens only for cross origin request).
This is why Postman let you see the response, because it doesn't do what chrome does, doesn't make any check.
As i said the correct solution is to fix your server side code and specify the Allow-Control-Allow-Origin header , alternatively a quick but temporary workaround is to install this plugin for chrome that will intercept the server response and add the Allow-Control-Allow-Origin to * (means any domain) this trick will fool chrome and make you see the response.
I'm writing an angularjs 1.5.0 application.
In this application i need to use $http to fetch image data to a blob.
i used the following code in my angular js controller:
$http({
url : 'https://myalcoholist-tuxin-com.s3.amazonaws.com/my-images/thumb_0000000001.jpg',
method : 'GET',
params : {},
headers : {
'Content-Type' : undefined,
},
responseType: "blob"
}).success(function(data, status, headers, config) {
}).error(function(data, status, headers, config) {
});
my website is at https://myalcoholist.com
I enabled cors in my s3 bucket using Bucket Explorer with the following parameters:
AllowedOrigin https://myalcoholist.com
AllowedHeader *
AllowedMethod GET
before settings the cors , i would get a preflight request error. after enabling cors I get
GET https://myalcoholist-tuxin-com.s3.amazonaws.com/my-images/thumb_0000000001.jpg 400 (Bad Request)
the pre-flight request, the OPTIONS method is sent and succeeds.
Request URL:https://myalcoholist-tuxin-com.s3.amazonaws.com/my-images/thumb_0000000001.jpg
Request Method:OPTIONS
Status Code:200 OK
Remote Address:54.231.114.146:443
but then the GET Request fails.
I tried to put an image on https://myalcoholist.com and then to try to get it with $http request and I got no errors. it seems that only trying to download from amazon's s3 is causing problems and I have no idea why!
the ACL is set for read. and browsing that file in the browser works.
any information regarding the issue would be greatly appreciated.
I'm developing a new Angular client which should communicate with my Node/Express server. I'm currently trying to develop the first step aka the login. This should be an http json post. It turns out that every single time I execute that post from the client to the server, the Node/Express server doesn't find the route for my path.
On the console log of the server, for my post json request I find following stacktrace:
OPTIONS /api/auth/facebook/mobile 404 274.092 ms - 1980
Node/Express side:
My route
app.post('/api/auth/facebook/mobile', authenticationHandler.handleFacebookMobileLoginRequest);
Body parser for json is defined:
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
On the Angular client side, I do:
http({
method: 'POST',
url: 'http://192.168.1.101:3000/api/auth/facebook/mobile',
headers: { 'Content-Type': 'application/json; charset=UTF-8;' },
data: {fbToken: authResponse.accessToken}
})
.then(function (response) {
...
Fun facts:
Same route works fine when I call it from a Java app or and Android native app, like
final JsonObjectRequest request = new JsonObjectRequest(Request.Method.POST, SERVER_URL + "/api/auth/facebook/mobile", params, jsonRequestListener, errorListener);
On my Angular client, when I change data with params then it works, the route is found...but I mean that doesn't make any sense. Moreover, I've got then a problem on the Angular client side, the answer isn't processed respectively the answer never land in the .then(... function. Which again works well in other clients.
Anyone got an idea, a clue or should I call Dr. Strange?
Possible browser preflighted request CORS issue?
Try using CORS module in Node.js server:
var cors = require('cors')
app.use(cors());
I am developing a small application use angularJS. The html pages are local file which will not deploy on web server. I defined a service module which will call the remote webapi to get the json data, however my success callback not be invoked.
$http({ method: 'GET', url: remoteServiceUri }).
success(function (data, status) {
var response = data;
}).
error(function (data, status) {
var error = data;
});
it always call into the error method. how can I resolve this issue please?
I can confirm that the service api work fine, as I tried deploy the page and webapi on the same site, in this case, it works.
is this caused by the cross domain or any configuration required?
Thanks.
You need to configure your remote web service to handle the preflight OPTIONS request.
Your web service must add the following headers to the response of the preflight OPTIONS request as well as the actual request:
{
"Access-Control-Allow-Origin": "*",
"Access-Control-Expose-Headers": "Content-Type",
"Access-Control-Allow-Methods": "GET,POST,PUT,DELETE,OPTIONS",
"Access-Control-Allow-Headers": "Content-Type"
}
You can find details about what which headers are required, and what do they mean here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
If you are using Apache, you could use proxypass to redirect requests. This way your angular app talks "locally" with your apache server, and it will pass the request to a different domain.
For example, in your httpd.conf set:
ProxyPass /foo http://foo.example.com/bar
In your angular app call
$http({ method: 'GET', url: "/foo/action" }).then(...);
Your apache will translate "/foo/action" to "http://foo.example.com/bar/action".
Bye bye cross domain issues!
For more info, see apache proxy module