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?