Unable to reach node backend from angular frontend AWS EC2-CodePudding

I am new to AWS and I have just setup an EC2 instance to host my MEAN stack app. I’ve added all my code and both the frontend and backend are up and running fine. The only issue is that the api calls from the frontend do not work. curl http://localhost:3000/products works fine from the command line and I get the correct data. But when the same link is called from the frontend I get Failed to load resource: the server responded with a status of 404 (Not Found)

Update: I have changed all api calls in the frontend to /api and have configured nginx with…

location /api/ {
   proxy_pass http://localhost:3000/;
}

…for node api reverse proxy. So now the api calls are made with the link http://<public ipv4 dns>/api/products However, I am still receiving the 404 not found response.

CodePudding user response：

The front-end Angular app runs in the user's web browser, on the user's PC/laptop. All your EC2 server is doing is serving the raw JavaScript files to the browser. The browser actually runs the Angular/JavaScript code.

Thus, localhost from inside the Angular code is actually the PC/laptop of the person viewing your app. It is not the EC2 server. You need to change your Angular app to access your API via the EC2 server's public IP address (or public DNS name) instead of localhost.

CodePudding user response：

After you get your Node.js AWS server URL, you can put it in this file in your Angular App:

my_app\src\environments\environment.prod.ts

export const environment = {
  production: true,
  myServer: 'https://yourServerInTheCloudURL.com/'
};

Then you can use "myserver" throughout your Angular app.