angular universal https problems

Question

I have an angular universal app set up. I do POST requests on the server-side using localhost to pre-render my app and this works fine.

An example working url would be http://localhost:8000/api/get-info.

I've now put the app into production on an external url (apache server). I'm also using ssl.

Now when I try to do a POST request on the server-side to pre-render my app, I get back a response with status: 0, url: null (I'm assuming this means the connection was refused).

An example non-working url would be https://mywebsite.com/api/get-info.

What really stumps me is that when the app loads on the client, all HTTPS requests start working. So the problem is I cannot get the express server to send POST requests to my external url.

I've tested a post request on the server-side to a different website (twitter), and that seems to work fine as well. So i'm not entirely sure where I've gone wrong.

I already have CORS set to '*' as well.

Where is your API running? The same Express.js server as the ssr engine? — Moema, Oct 04 '17 at 17:32
that is not a valid response, see this link https://stackoverflow.com/questions/19858251/what-does-http-status-code-0-mean — FussinHussin, Oct 04 '17 at 20:58
@fussinhussin I understand it's not valid. I need to know why the response from the server is timing out or giving me an invalid response. — asd, Oct 05 '17 at 03:23

score 1 · Answer 1 · answered Oct 05 '17 at 07:19

1

Try using

http://localhost:8000/api/get-info

in production as well. Since your Angular app is rendered on the same server as your API is running, using localhost should just work fine. It doesn't matter if you are on an external URL.

I do something similar (its a GET but that shouldn't matter) with my translations:

if ( this.isServer ) {
     translateLoader.setUrl( 'http://localhost:4000/assets/localization/' );
 } else {
     translateLoader.setUrl( 'assets/localization/' );
 }

It works locally and in production (both server and client).

answered Oct 05 '17 at 07:19

Moema

863
4
10

cheers, I got it working using that method. The key was also making the server listen to a different port over HTTP. So the server listens to HTTP on port 3000, and HTTPS on port 8000. The server side requests http://localhost:3000/api/get-info, and the client requests https://my-website.com/api/get-info. – asd Oct 05 '17 at 09:00
Perfect! That's actually what I meant, but I forgot about your HTTPS – Moema Oct 05 '17 at 09:23

score 0 · Answer 2 · answered Oct 02 '18 at 12:33

I just encountered this problem myself for two days. Please take a look at my comment on https://github.com/angular/universal/issues/856#issuecomment-426254727.

Basically what I did was I did a conditional check in Angular to see if the APP is running in browser or in server (rendered by Angular Universal), and change my API endpoint to actual IP in https or localhost in http accordingly. Also in my Nginx setting, I only redirect incoming request from browser to https by checking if the server_name is localhost.

Hope it helps!

angular universal https problems

2 Answers2