I'm developing a web app using Next.js that is, in the end, served by a custom Express.js server. I'm trying to deploy this app on EC2 and access it but I'm getting ERR_CONNECTION_REFUSED errors.
I'm accessing the app over HTTP using the public DNS of my instance (http://ec2-PUBLIC_IPV4_ADDRESS.compute-1.amazonaws.com/) which works fine, the index.html then needs to load other files (e.g.: .js or .css files), but tried to load them over HTTPS (https://ec2-PUBLIC_IPV4_ADDRESS.compute-1.amazonaws.com/style.css). In the network tab of the developer tool of Chrome, I get one request that is succesful and other assets that fail with net::ERR_CONNECTION_REFUSED.
I was wondering if there is a config either on my EC2 instance, on my Express server or even on Next.js that needs to be modified to make sure that the connection is not upgraded to HTTPS.
I would prefer to find a solution that doesn't involve setting up a domain for early testing purposes.
Thanks in advance.
Related
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.
I am having trouble serving my static files on Elastic Beanstalk using NodeJS deployed on Linux 2. My local environment works, but my deployment is unable to serve the static files located in a top-level static folder called 'public'.
My configuration is as follows:
option_settings:
aws:elasticbeanstalk:environment:proxy:staticfiles:
/images: public/images
/javascripts: public/javascripts
/stylesheets: public/stylesheets
I am certain that the configuration is processed correctly because I can view the results of the static file configuration within AWS UI. When I navigate to the home directory of my site (using http:// protocol), the HTML page is loaded, but the CSS and JS under the public directory is not. The error I get is as follows:
GET https://<domain name>/stylesheets/layout.css net::ERR_CONNECTION_TIMED_OUT
Note that the https:// protocol is used. From my understanding, the reason my local environment works is that my application serves the static files with the correct protocol. Here are my questions:
Why are my static files being served with protocol https:// when I request my home directory using http://?
I don't want to serve my static files through the application to reduce the number of requests to my application, noted here: https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/command-options-general.html#command-options-general-environmentproxystaticfiles. Is there anything actually wrong with the configuration?
Issue was resolved. I am using Helmet JS for Content Security Policy (CSP), and it has a directive for converting insecure requests to secure ones: upgrade-insecure-requests. Make sure to remove that in the development phase for a site that is relying on http:// for content. Best practice is to use https:// when possible.
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.
I am using nodeJS and expressJS for backend and ReactJS for frontend of my application. Everything works fine when run locally on my computer. However, I recently have tried to deploy the app using Heroku. The app successfully launches at the given link from Heroku but then whenever I try to sign in/sign up I'm always thrown an error from the backend. The error is as follows when I am using Safari and Google Chrome respectively:
I have already enabled cors on my expressJS server, what is the likely cause of the issue?
It looks like your ReactJS code has the url http://localhost:5000/ hard coded in it somewhere. If your same Heroku instance serves the ReactJS and provides your API endpoints, then you should consider using
/api/users/signup
for the URL of your API endpoint instead of
http://localhost:5000/api/users/signup
This wrong URL shows up as an access control issue because browsers block external pages served by https to use localhost APIs. Because cybercreeps.
I am working on a 2-player card game. The two client facing pages are hosted on Github pages and the node server is running on AWS.
Everything works fine when I view my client side pages locally, but when I try to open them on Github pages I get this error:
Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ''. This request has been blocked; the content must be served over HTTPS.
So then I change the connection url to include https like this:
var socket = io.connect("https://ec2-18-191-142-129.us-east-2.compute.amazonaws.com:3000");
And I get this error:
index.js:83 GET https://ec2-18-191-142-129.us-east-2.compute.amazonaws.com:3000/socket.io/?EIO=3&transport=polling&t=N71Cs6c net::ERR_SSL_PROTOCOL_ERROR
Here are my security groups:
Do I need to do something with an SSL certificate? Is it even possible with my current setup as I don't have access to the domain I am hosting on (Github Pages). If it's not possible are there any online services I can host my client code on and get an SSL certificate, or do I have to buy a domain and hosting? Any help welcome, but please try to explain it because I am very new to all this. Thank you.
Ec2 doesn't support https like this ("out of the box").
There is several way of doing it, but I suggest you should create a application load balancer (https://docs.aws.amazon.com/elasticloadbalancing/latest/application/introduction.html) and then configure https on it (https://docs.aws.amazon.com/elasticloadbalancing/latest/application/create-https-listener.html).
Other solution can be using Cloudfront, or configure https directly on the instance (https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/SSL-on-amazon-linux-2.html).
Hope that makes sense.
As mentioned by alcyon, changing from HTTP to HTTPS does not enable your application to run over HTTPS. There are many ways to achieve this. Checkout the detailed guide by AWS for your use-case at https://aws.amazon.com/premiumsupport/knowledge-center/configure-acm-certificates-ec2/ .