Deployed Angular 2 on Webserver throws status 0 on get - node.js

Thanks for the help, in advance.
I have developed a Angular 2 Single-Page Application and build it with ng build. I moved the builded stuff onto a webserver, on which a node.js backend is running on the port 4000. If you go to the main page, I try to get something from the backend with:
return this.http
.get("https://localhost:4000/auto")
.toPromise()
.then( (res)=> res.json());
But then I get this error message:
error message:
It does work if I change localhost to the ip Address of the webserver, but only if cross-origin is allowed in the backend, which I would like to have disabled.
A thing to note is, that I am also using https (ssl certificate) for the first time, so maybe there is something wrong ?
This is my first time deploying something to a real webserver, so I am not sure what is wrong. Everything else seems to work with the build, only got that problem, communicating with the backend on the same webserver (Webserver runs apache). I hope someone can help me. I hope i explained everything necessary, if you need more informations, tell me what you need.

Related

HTTPS conflict with HTTP

HTTPS conflicts with HTTP
I make my first full-stack project on React and NODEjs and deployed it on netlify.
My backend server runs on HTTP localhost.
And here is a problem:
My app works on my Mac in Chrome but doesn't work properly on other browsers and computers.
Other computers can download index.js (display sign-up and sign-in pages) and it seems there is no problem with CORS but authentication doesn't work.
Safari logs mistakes:
[blocked] The page at https://MYAPP.netlify.appwas not allowed to display insecure content from http://localhost:3500/register.
Not allowed to request resource
XMLHttpRequest cannot load http://localhost:3500/register due to access control checks.
I don't understand why the app works on my MAC but
doesn't on other computers and can't find an answer on how to solve this HTTPS - HTTP conflict
I have tried to find a problem in CORS but it looks like CORS is ok. Also, I tried rewriting the server with HTPPS but it didn't work.
I've never worked with Netlify, so I could be wrong, but I suspect your problem isn't directly related to Netlify.
The Safari error message indicates that your frontend is trying to talk directly to localhost. localhost is an alias for "the computer that is making the connection attempt" under normal circumstances. This means that when someone runs your frontend, the browser tries to talk to the backend running on the same computer that the browser is running on.
This works on your computer in Chrome because you probably have the backend running on your computer for testing. Safari is only complaining that the frontend was loaded via HTTPS but is trying to talk to non-HTTPS servers. It is not stating that it can't talk to the backend, it's stating that it won't even try.
If I'm right and you shut down the back end on your computer, it will start to fail on your computer as well, even on Chrome.
If this is the problem, the solution can be one of two things: You can either run the backend somewhere where it has a domain name/ip address that everyone can connect to, or you need to run a proxy for your backend somewhere where it also meets those conditions, and has a way to pass the request on to where your full backend does run.
You need to find a way to run your backend somewhere other than your own computer or have something somewhere else proxy requests to your computer which then gets relayed to the localhost address. How you go about that will depend on things you didn't specify in the original question.

Failed to load resource: net::ERR_CONNECTION_REFUSED, Error after deploy

I developed a website using react and node.js, and my team deploy it on the server, the problem is when we try to use the website using the new domain or IP address it gives us this error:
Although it works fine in the localhost:3000 in the server, can you please give me the hints to solve this
I also faced the same issue because of not updating
backend URL so make sure to check the backend URL in the frontend. If you host any cloud-like Heroku then include on .env
In your case, there might be some other reason as well.

NodeJS redirect to internal localhost server

I am new to nodejs so apologies if this is a bad question.
I am using NodeJS + Auth0 to authenticate a shiny webapp. I have most of it working now including the call back but am stuck on the last step.
Assuming it authenticates, I want to proxy pass directly to 127.0.0.1:3838/myapp.
In other words, if the loopback address were public I could do:
res.redirect('http://127.0.0.1:3838/myapp/');
However, as it's not public that is no longer an option. Any advice?
res.redirect('/myapp'):
Should redirect you to the /myapp route assuming that you are running the NodeJS app locally on 127.0.0.1:3838
Have a look at https://stackoverflow.com/a/44445540/16471349

MERN stack application deployment to Heroku issues

As the title says, when the application is supposed to be built and good, (at least during deployment, the log files etc always state that the build was successfull) when everything should be set to go, I open the site and encounter 2 console errors:
Failed to load resource: the server responded with a status of 503 (Service Unavailable)
Failed to load resource: the server responded with a status of 503 (Service Unavailable) favicon.ico:1
Tried looking up those errors and finding solutions but none of them seemed to work, Even though, the application works perfectly on local heroku (where you can test your app, in the heroku enviroment).
Not sure what I could do to fix my problem, as many forums suggest that you can't really do anything about it if it works fine on local heroku, it's must likely a server fault.
Thanks
edit: kinda fixed it myself after long days of struggling. Changed up file locations, moved server.js etc out from backend, into the main folder, and created a client folder, which now contains all the frontend stuff. Exact opposite what I used to have, since I used to have frontend out in the 'wild' and only had a backend folder for... well, backend files/folders/scripts.
Problem solved... kind of, still not sure why the first version i tried to use didn't work, but at the end of the day, I'm fine with it

Network Error (React-Native, Express,Nodejs,MongoDB)

I am getting a Network Error while calling my server(nodejs) API.
I have rechecked my localhost, server, and port.
They are all working fine. I have also confirmed using POSTMAN and also ran the server on the web locally to fetch data.
I think I have also added the cors properly in my server.js file.
Want some help on this.
I have also tried with dummy API and they worked fine.
My imports from front-end
Here is LogCat
Response Header in Postman
ngrok status
Hi I think you can try exposing your local host to the internet using a service like ngrok which will generate a url for you, and then try using the url to send requests instead of localhost:3000. Simply download and follow the instructions here: https://ngrok.com/docs
It seems that you are having a problem in react native code, not in backend. That's why you are not getting any error in postman.
I am guessing that you are importing the dependencies is problematic way.
if you are trying to use local server API in mobile application development, all you need to do is replace "localhost" in the URL with your pc IP address. This worked for me.

Resources