I am developing a cordova application. After login i need session id for all server call. For that i need to get session id from Set-Cookie header. In angular $http service didn't show Set-Cookie in response header. How i got the Set-Cookie?
$http({
method: "POST",
url: "http://localhost:3000/contacts",
data: JSON.stringify({'key':'value'})
}).success(function(res,status, header, config){
console.log(config, header);
}).error(function(err){
alert('Unautherized '+JSON.stringify(err));
});
Add an $http interceptor that reads the value from the cookie and sends it in every request. Cookie can be read with $cookies service. Example:
$cookie.get('session');
To use $cookies service don't forget to add ngCookies module as a dependency first.
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 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 *.
I'm trying to make wordpress as a backend to my angularjs app, so I'm using the plugin rest-api with the jwt-auth
so when trying to login I get the following error
XMLHttpRequest cannot load http://localhost/back/wp-json/jwt-auth/v1/token. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://imider.ma' is therefore not allowed access. The response had HTTP status code 500.
I know i have to add CROS access, but I'm not familiar with wordpress, so any help?
https://docs.google.com/document/d/17zgUHZrvL5KVG2yKQE8NWgxNZn6V08xr65DBox5WVZ0/edit?usp=sharing
here is my tutorial of how to access the api
then you can use this to get the token
$http({
method:'post',
url:'',
data: {
username: '',
password: ''
}
}).then(function(results){
console.log(results);
})
then you can use this
$http({
method:'get',
url:'',
headers: { 'Authorization': 'Bearer <myTokenId>' }
}).then(function(results){
console.log(results);
})
I created a video detailing the process of installing and setting up the plugin. If you follow the steps I outlined there you should be good.
https://youtu.be/Mp7T7x1oxDk
The idea is that you also need to modify .htaccess and wp-config.php to make the plugin work with the existing API endpoints as well.
Just by installing the plugin and adding a SECRET_KEY, used to sign the token will make the JWT setup work but it will not allow you to use the tokens generated through that API with the existing REST API endpoints.
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 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