How to connect from angular to express server running on the same machine?

问题

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 :(

回答1:

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();
});

来源：https://stackoverflow.com/questions/41193190/how-to-connect-from-angular-to-express-server-running-on-the-same-machine

标签

angularjs

node.js

express