Angular 5: How to handle cases when Rest API redirects to URLs outside domain?

Question

I have my angular 5 app and Java Rest APIs deployed in the same Jetty container (same server and same port).

I have a rest API, which if accessed without authentication, is redirected to SSO (external domain), user logs in and user is redirected back to called rest api. This flow is working fine if the api is accessed directly from browser.

However, I am not able to figure out how to do the same with my angular app.

this.http.get('http://localhost:4400/api/test/sso',
                { observe: 'response' })                                
                .subscribe(
                  res => {
                    console.log("SSO respnse= "+res);
                  } ,error => {
                      console.error(error);
                  }                 
                );

Nothing happens.

However,hitting http://localhost:4400/api/test/sso directly in browser works as expected and redirection happens without any issue.

Also, the other Rest api that return a simple response are working fine from angular app. It is just this api which redirects to an outside domain, which is not working from angular app.

score 0 · Answer 1 · answered Jan 30 '18 at 10:21

0

You need to add CORS properties for response headers for server on external domain

res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');

The simplest way to do it on nodejs as follows:

var cors = require('cors'); app.use(cors());

Please look at here for details

answered Jan 30 '18 at 10:21

Mike Adamenko

2,944
1
15
28

CORS is already there on external server which is the reason why I am able to make a request by directly entering the rest api url in browser. Problem comes when I am trying to make the request from angular app(which is on the same domain as rest api) – tryingToLearn Jan 30 '18 at 10:26
Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:origin, content-type, accept, authorization Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS, HEAD Access-Control-Allow-Origin:* Authorization:Bearer eyJhb Cache-Control:no-cache, no-store, max-age=0, must-revalidate Content-Length:19 Content-Type:application/json Date:Tue, 30 Jan 2018 10:30:20 GMT Expires:0 Pragma:no-cache Server:Jetty(9.2.10.v20150310) X-Content-Type-Options:nosniff X-Frame-Options:DENY X-XSS-Protection:1; mode=block – tryingToLearn Jan 30 '18 at 10:33

score 0 · Answer 2 · answered Jan 30 '18 at 17:19

0

Have you ever considered starting your app with --host and --proxy-config(*) flags and starting your sso service also on the same host, so you could actually do some less problematic development?

(*) ofc proper config.json will be needed

answered Jan 30 '18 at 17:19

Kamil

72
1
9

I am using OKTA for SSO so i don't have a flexibility of bringing it on samehost. I build angular app and then deploy it on Jetty. – tryingToLearn Jan 31 '18 at 03:26

score 0 · Accepted Answer · answered Feb 26 '18 at 10:30

I researched and found that the best way for my use case is to redirect the browser to my rest api instead of using httpclient to make the get request.

window.location.href =  http://localhost:4400/api/test/sso //i.e. url of rest api

After the authentication flow completes, the api can redirect back to a certain specific route of angular app.

Angular 5: How to handle cases when Rest API redirects to URLs outside domain?

3 Answers3