JHipster serve Angular frontend separately - Cors problems - jhipster

We started using JHipster monolith and now we have to separate the frontend for several reasons. Building and deploying the angular www folder works. However, we always get a Cors error:
Access to XMLHttpRequest at 'localhost:9000/api/authenticate
The backend allows Cors (also runs in dev, default is cors enabled)
Do I have to modify the proxy.conf.json? Any other easy workarounds?

Related

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.

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.

How to enable CORS between Firebase Hosting and Google App Engine

I have hosted my SPA in Firebase Hosting, and my API Nodejs server in Google App Engine. Now I'm stuck at enabling CORS when calling an endpoint from my SPA.
I have tried adding it in my app.yaml with no luck:
handlers:
- url: /
static_dir: /
http_headers:
Access-Control-Allow-Origin: "*"
Any other ideas?
EDIT:
I would like to also avoid using the cors npm package cuz I think CORS handling should be done at the network level like Nginx but what is the equivalent of Nginx in GAE?
I understand your point and concerns, but I would recommend you to set the CORS properly, for the Firebase and App Engine to work properly.
Considering that, I searched for some sources and articles that might help you configure it, including options that you might find a better fit for your needs.
CORS on App Engine
Handlers Element
Google App Engine and CORS
Let me know if the information helped you!

I've deployed a nodejs api to Heroku and a React app to my personal site and I'm getting cors errors but going to the api url directly gets response?

I've written a NodeJs app with an express server that runs fine on heroku. From my local machine, with the proxy set in package.json of my React app, I can interact with the API. From the browser I can also interact with it. However the deployed React app on my site can't get the resources. Heroku is picking up the GET requests by the way.
I'm not very well versed in Dev ops, networking, deployment so I'm wondering where in the system I'm running into the problem and where I should look to fix the problem.
Edit:
I've added the cors npm package. I can make fetch requests from the browser. But my site can't...
Def sounds like a cross origin error! The browser is masking error details from react for security purposes. Try adding npm install cors & then add it as middleware - you can view the npm package here

Accessing different host from separate front-end (cross origin)

I've built a website with frontend in Polymer (no backend logic) and backend with Symfony and data given only through various APIs.
I have run it on chrome with
-args --disable-web-security
now, after upgrading chrome it doesn't work. What should I do to allow access to separate backend on a separate server that would be considered a good practice?
Have you tried to add this header to your API responses?
Access-Control-Allow-Origin: http://your.client.domain

Resources