ngrok does not load NodeJS app from outside (ERR_CONNECTION_TIMED_OUT) - node.js

ngrok is a program with which you can make a local tunnel, it generates a temporary domain for you so you can redirect people to your local content, and also use https via localhost.
https://ngrok.com/
localtunnel is just another alternative.
So I have set up either ngrok and a localtunnel but both show a white page with only the HTML loading and not css or js when loaded outside of my network (with data plan for example)
The problem is nothing gives an error, the only thing I can see is ERR_CONNECTION_TIMED_OUT when using a hotspot.
Everything works within my own network.
I have tried turning off the firewall already but it seems to make no difference, also tried looking with the chrome remote debugger but it just disconnects when I load the url.
Thing is when I go to https:// on the ngrok url I get a bunch of mixed content errors, but not when I go to http. Seem illogical to me that it would default to http when using a https link... all of my script/style tags are relative paths.
Anyway so far this is only thing that I can figure out, any ideas on what might cause this?
So it's either
ERR_CONNECTION_TIMED_OUT
or
Blocked loading mixed active content
or both?

So I go it working now by changing the base href.
<base href="http://yoururl.ngrok.io">
And also changing some paths in my config to either /app/ or ../ respectively, but most of these were already set correctly and all I did was revert them after changing the base url.
As far I understand now the problems only really start to occur when connecting to the url through a data plan and not wifi.
Some random image paths in css/js will not load, and it also appears to behave differently on Firefox and Chrome for some reason.
Problem is I cannot keep testing this indefinitely as data will obviously run out some time and I have no reliable way of debugging the console errors on mobile...
In conclusion it works on a "normal" connection now (ie Wifi/Cable) but not on data.

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.

Locally setting up redirect to https://

I have read a few answers to try and find a solution to a ridiculous problem.
I dont have access to a server that I can log on to access phpmyadmin,
What is supposed to happen is that the web url is supposed to be viewed via https, and in most cases this happens.
Except for a particular PC I have at home and it never seems to open in https. Why this is happening on this given machine is completely unknown.
Is there a way I can set up a rule on my local machine that will ALWAYS convert http://pathtomysite.com to https://pathtomysecuresite.com, (possibly via the 'hosts' entry (and yes it is a windows machine running win10).
I could do this on the web server itself, I know how to do this, but the problem is, I don't have, nor am I allowed to have, access to the database server to update the .htaccess or webconfig.xml on the server. (I am 99% sure its Apache, not nginx or IIS).
Any help is allows gratefully received.

Changing localhost server files are served from using Node (Webstorm /maybe IntelliJ)

I'm not sure what I'm missing here, so hopefully someone can help me out. I'm working on a project where we're using Node and in the Run/Edit configurations I've down the following:
Node interpreter: This is the path to the node.exe file
which I checked out from Subversion
Working directory: this is where the "app.js" file is, this is the
path that from the command line you type node app.js and it starts the server
JavaScript file: app.js This is the name of the file that actually creates the server
Now from the main nav bar when I do Run / Run my server the box at the bottom pops up and tells me that Express server is listening on port 3000. Cool.
I can navigate to localhost:3000/myPage.html and I can get to the page just fine.
I added as JSON file to the same directory on my hard drive that myPage.html is in, and I can navigate to that as well by localhost:3000/largeTestData.json.
So the server is up and running and serving file as it should. My problem is that in my Webstorm project, I want to make an AJAX request to that largeTestData file. I do so using jQuery like:
var data = $.get('localhost:3000/largeTestData.json');
data.done(function(data){
console.log('here is your data');
cnosole.log(data);
})
When I do that I get the error (in Chrome)
XMLHttpRequest cannot load localhost:3000/largeTestData.json. Cross origin requests are only supported for HTTP.
and so I look at the URL and I'm seeing:
http://localhost:63342/
Obviously Webstorm has started the server correctly, but when I view an HTML file, it's not using that server (which, of course is why I'm getting the CORS error.
There's some fundamental stuff here which I'm obviously not getting. I need my IDE to deploy to the Web server that it started up, but it's not doing that. Please, someone give me a once over on all the technologies that I'm missing out on here.
WebStrom didn't start your node.js server, but serves static pages by its own internal HTTP server which doesn't know anything about node.js and Express.
The main problem:
When you start your node.js server, it's serving JSON files on port 3000. If you open an HTML-page with the little menu in WebStorm (where you can choose the browser), WebStorm opens the browser with an URL pointing to its own internal webserver running on a different port (e.g. 63342). JavaScript security prohibits loading data from a different host/port Same-origin policy.
It's not WebStorm's fault and you need a solution for this problem in production or you can't go live.
General Solution:
Either you have to ensure that HTML pages and JSON data come from the same host+port, or you can circumnavigate with (a) setting server-side headers ('Access-Control-Allow-Origin: *') as #lena suggested, or (b) using JSONP. Below you find some thoughts using nginx as a reverse proxy so from browser's point of view all requests go to the same host+proxy. It's a very common solution, but as mentioned above, there are other options.
Primitive solution:
Don't use WebStorm to open your browser. Load the page from http://localhost:3000/ and change the URL of the REST resource to $.get('/largeTestData.json'). You'll miss some comfort from your IDE, but you can immediately see that your program is working.
Comfortable solution:
As #lena suggested, there is a way to configure your Express/node.js as a server known to WebStorm. I haven't tried it, but I suppose you can then just press the Run-button and maybe the node.js plugin in WebStorm is as intelligent to know the static-maps in Express and know how to map an HTML-file to a web application URL and open the page in the browser with the URL served by your node.js application. (I'd be surprised once again if this really works magically, but maybe you can configure a mapping from files to URLs manually, I don't know.)
Dirty solution
With some options you can disable security checks, at least in Google Chrome. Then it's possible to load JSON data from a different port than your HTML page. I wouldn't recommend using these options (just my opinion).
Additional Hints
If you do more than just playing around with node.js and some UI fun and you have to serve your application "production-ready", then have a look at nginx to serve your static files and reverse proxy node.js requests from there. I'm using this setup even for development and it works like a charm.
Of course node.js / Express is able to serve static files as well, but IMO placing something like nginx in front of node.js (clustered) bring a bunch of advantages for production sites, e.g. load-balancing, ssl-offloading, avoid JSONP, in many cases performance, easier deployment updates, availability.
To get your code working, just change the URL in $.get() to full URL (including protocol):
var data = $.get('http://localhost:3000/phones.json');
In Webstorm 2016.3 (and probably earlier) there is now another option. Under the Configuration Settings for NodeJS runs, one can manually set the page and port to be loaded via Webstorm's "Browser/Live Edit" settings.
See the screenshot below for settings one can change.

After moving server and IP, stylesheets and other resources not found (404 errors in fiddler)

I have moved an Orchard CMS site from one host and server to another host and server. The IP address is obviously different.
All the files have been correctly copied and the correct html is rendered.
However, all the styles sheets produce a 404 error. I repeat that the files are where they should be.
Indeed, any other resource, such as images or stylesheets produce the same problem. Again, the files are all in place.
Can anyone think what could be causing this. Nothing has changed other than the server and IP.
I have another orchard site on the same IP and server that is working fine. However, it was not moved from a different server.
I ping for the site and it comes up with the correct IP address for the new server
EDIT:
Not sure that this is Orchard specific, although something related to Orchard's themes and how they work could be to blame... But I really can't see what.
It sounds much more like an IIS issue.
Can you get the CSS files, by entering their URLs into the browser address-bar directly?
Try "Copy image location" or from the Image Properties, of one of the failed images. Again, can you get this if you enter it direct into the browser?
Check the URL of failed resources, against the URL of working HTML resources or dynamic pages. make sure there are no differences in webapp path or context..
You'll also need to try Ctrl-R reloading.
There could also possibly be some caching in the way.. that might be holding the "404" or "not found" results, even after the content has moved. Try & shutdown/ or force refresh all server & proxy caches.
The server people got back to me. They changed the "website to 4.0 Integrated Pipeline mode." and all now works. Go figure.
I am sure I had checked that it was in Integrated Pipeline mode, but hey ho.

IIS 404 Error even when file exists?

I have been working with IIS 7 for a while and it has worked fine until it just suddenly started throwing 404 errors for my multiple websites even though they actually exist. All of the configurations seems fine (path, default document) but not a single file, no matter the format or location will be loaded.
Another strange thing is that everything works when I try to access the websites via localhost or 127.0.0.1 but not through my external IP.
Does anyone know why this could happen and how I can fix it?
Edit:
It appears this 404 page is not the built in IIS error page. It is associated with nginx but I'm not sure where the file is located on my server or why my pages are being intercepted.
It turns at the server was hijacked by Morfeus F***ing Scanner, which I was not aware was even a thing until this happened. It's activity showed up in the server access logs. I basically had to reset the entire server. It was quite a chore.

Resources