Nuxtjs server side rendering could not call to the api behind cloudflare - node.js

We are building a project with NuxtJS. The API is deployed on AWS and used Cloudflare to set up DNS.
Sending the request to asyncData(), inside this method we made the call to API via domain(the domain pointed to actual load balancer URL of AWS - by setting up CNAME in Cloudflare). The error 503 was returned. Looks like the call is occurring inside of nodejs server. If anyone was familiar with this situation, please give me a hand. Thanks in advance.
Also noticed that, this is not appearing when calling the API with nuxtjs from the browser. As I understand, nuxtjs's asyncData is executed from the server, while on navigation it executed from browser.

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.

ERR_CONNECTION_REFUSED on EC2 public DNS caused by HTTPS

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.

Intermittent 502 when using cloudflare on azure

I am hosting my website on azure and using cloudflare for dns and proxy.
Recently I started experiencing a problem where if I refresh a page a number of times, eventually I get the cloudflare 502 page. Refreshing the page again and it loads fine.
If I refresh the page without using cloudflare, i.e. I go straight to {mydomain}.azurewebsites.net I don't get the issue.
So obviously the problem is server/cloudflare side config. Any ideas on what could be causing this?
I think it is related to this issue: https://community.cloudflare.com/t/random-502-errors-for-last-3-days-caused-by-illegal-request-header-injected-by-cf-reverse-proxy/202061
The 502 Bad Gateway error is an HTTP status code that means that one server on the internet received an invalid response from another server... so as it stands you don't have enough information to figure out what is going on here.
You will need to find a way to get the web server logs from your server on Azure and possibly also the logs from Cloudflare.

XMLHttpRequest cannot load http://localhost:5000/api/users/signup due to access control checks

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.

calls to external web api Access-Control-Allow-Origin error 502 nodejs

I need to call an external web api which runs on the same server as my application, but don't get permission to do so. When I run the application locally, it works fine. But when I deploy it, error 502 on every remote request.
I searched to the suggested questions when I made this question.
Is it possible to have the same issue as him: Steam API Access-Control-Allow-Origin Issue
Because there was no way around this problem. We hosted everything on the same server, so there couldn't occur an Access control allow origin error.

Resources