Our application utilizes a decoupled MEAN stack architecture. I am currently facing an issue when attempting to send a request from my Angular frontend to our backend, which is expected to return JSON data. However, each time I send a request from the frontend to the backend, I encounter the following error:
XMLHttpRequest cannot load http://localhost:9000/recipes/175169. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
To handle cross-origin requests, I have set up the following configuration on the backend:
app.use(function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');
res.header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE");
next();
});
The frontend request being sent is as follows:
recipe.controller('RecipeController', function($scope, $http) {
$scope.loadRecipe = function() {
$http({
url: 'http://localhost:9000/recipes/175169',
method: 'get',
headers: { 'Content-type': 'application/json' }
}).success(function(data) {
console.log(data);
}).error(function(data) {
console.log('Error: ' + data)
})
}
Although disabling Chrome's web security resolves the issue, it is not considered a permanent solution but rather a temporary workaround.
open /Applications/Google\ Chrome.app--args --disable-web-security
This is my first time seeking help on StackOverflow, and I am still learning about Express and the MEAN stack. I apologize if the resolution to this problem seems obvious. Despite conducting extensive research, none of the solutions I came across have successfully resolved the issue.