Cloud9 Angular & NodeJS unable to access API running on different port of same machine

I am using an AWS cloud9 IDE for my project.

I have Angular running on port 8080. I have my NodeJS (+Express) server running on port 8081.

I have CORS headers setup in my Node app.js as following:

const app = express();
app.use(express.json());
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET, POST, HEAD, OPTIONS, PUT, PATCH, DELETE");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});


I use Angular services with http client module to make requests to api endpoints (https://localhost:8081/blogposts/*).

In one of my Angular components, I make a request to fetch the data inside ngOnInit():

ngOnInit() {
this.blogService.getBlogPosts()
.subscribe((blogposts: BlogPost[]) => {
this.blogposts = blogposts;
});
}


but I get the following error in the browser console:

GET https://localhost:8081/blogposts net::ERR_CONNECTION_REFUSED


I thought this was a problem with setting up CORS headers, but as shown above I have added all required headers.

I read that a proxy can be used as an alternative solution to CORS, but this is not suitable for production environments.

I can confirm my API works fine using curl:

ubuntu:~/environment (develop) $ curl http://localhost:8081/blogposts

[{"title":"Calvin and Hobbes","authorName":"Bill Waterson", ...


I am also concerned whether the Cloud9 environment is preventing me from making these API calls, but as far as I know, both ports 8080 and 8081 are safe to use.

Can I get more help in finding what's wrong with my api?

Continue reading...