1

I am very new to express (and backend), and I am learning. So I mounted an express server on my machine by running express and npm install, and then overwriting the app.js with a simple code that serves something on /test

var express = require('express')
var app = express()

app.all('/*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type,X-Requested-With');

    next();
});

app.get('/test', function (req, res) {
    res.send('hi???');
});

app.listen(3100);

On my frontend, I am working with angular, it is running on localhost:3000, but when I run

function TestController ($http) {
    var vm = this;

    $http.get('http://localhost:3100/test')
        .then(function (response) {
            console.log(response);
        });
}

It throws the following error:

XMLHttpRequest cannot load http://localhost:3100/test. Request header field Pragma is not allowed by Access-Control-Allow-Headers in preflight response.

I thought it could be a problem on the backend, but when I run

function TestController ($http) {
    var vm = this;

    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', 'http://localhost:3100/test', true);
    httpRequest.send(null);
}

It won't throw any error, so I guess it is a problem with my angular configuration, but I cannot figure out where or what the problem is... how can I fix this? any help tweaking the backend or the frontend to fix this will be really helpful!

I already tried this, but it won't work, AngularJS POST Fails: Response for preflight has invalid HTTP status code 404 it doesn't makes any difference :(

Community
  • 1
  • 1
pr00thmatic
  • 815
  • 9
  • 14
  • Serve your angular app from the express server or enable CORS on the express server – rob Dec 16 '16 at 22:20
  • how can I serve my angular app from the express server? – pr00thmatic Dec 16 '16 at 22:25
  • take a look at this article https://expressjs.com/en/starter/static-files.html – rob Dec 16 '16 at 22:26
  • I am using gulp for my angular app, so it is not as easy as access a plain html file. I don't know how to do this, i copied the whole directory into the public folder, and configured the route for access, but I cannot access my app... on the other hand, I already enabled CORS on the express server as explained here http://enable-cors.org/server_expressjs.html – pr00thmatic Dec 16 '16 at 22:33
  • why the downvote? is the question not correctly stated? is it a too focalized question? o.O anyone have ever problems with headers? what kind of tutorials are you reading? can you share so I don't ask "dumb" questions? or is it outraging that it was not a CORS problem? (yeah, i was angry too) – pr00thmatic Dec 17 '16 at 12:26

1 Answers1

2

Given the description of the problem, it was not about CORS, it had to do with headers not being handled correctly by the backend. Running the app on firefox, firebug suggests to add the token pragma to Access-Control-Allow-Headers... and then, another unkown header would jump up, now called cache-control so I only had to modify the app.js.

For anyone having this same problem, you just need to add the problematic headers to the string on 'Access-Control-Allow-Headers' :)

app.all('/*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers',
               'Content-Type,X-Requested-With,cache-control,pragma'
                    + otherHeadersSeparatedByComma);

    next();
});
pr00thmatic
  • 815
  • 9
  • 14