Enable CORS in Nodejs with expressjs4

Question

I'm trying to host standalone JS widget in node server with CORS enabled. I'm using Expressj 4 and want to server css,js and font file.

Issue i'm facing now is font files are not loaded

var express = require('express');
var path = require('path');

var methodOverride = require('method-override');
var bodyParser = require('body-parser');


var app = express();


var environmentRoot =  require('path').normalize(__dirname );

app.set('views', environmentRoot + '/public');
app.engine('html', require('ejs').renderFile);

app.use(methodOverride());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(express.static(environmentRoot + '/public'));


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


var portNum = process.env.PORT || 3002;

app.listen(portNum, function (a) {
   console.log("Server listening in http://localhost:"+portNum);
});

Package JSON

{
   "name": "PackageApp",
   "version": "0.1.0",
   "dependencies": {
      "express" : "~4.9.0",
      "body-parser": "~1.8.1",
      "method-override": "~2.2.0",
      "ejs" : "~1.0.0"
  },
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-html2js": "~0.1.0"
  }
}

Have you tried watching the developer toolbar? Are the headers present? Any errors in the javascript console or in the network tab? — ConcurrentHashMap, Sep 13 '14 at 08:31
Font from origin 'http://myhostname' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3001' is therefore not allowed access. — tomalex, Sep 13 '14 at 08:47
@tomalex to debug CORS issues you need to know **exactly** what request is made from the client, and what response is send from the server. To see if your CORS headers are correct, have a look to my detailed answer on a similar problem here http://stackoverflow.com/q/25427627/827168 — pomeh, Sep 13 '14 at 11:01

akaphenom · Accepted Answer · 2014-09-13T10:49:07.293

8

I would try flipping these statements from:

app.use(express.static(environmentRoot + '/public'));


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

to

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

app.use(express.static(environmentRoot + '/public'));

I would expect that the headers need to be set before the body is sent to the client

edited Sep 13 '14 at 10:49

answered Sep 13 '14 at 10:40

akaphenom

6,728
10
59
109

What is `Access-Control-Allow-Headers` doing? Do I need it if I want to send a soap request in a `public/.html` with `XMLHttpRequest()`? Is `res.header("Access-Control-Allow-Origin", "*")` on server side enough or do I need also in js client `xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "*");`? – Timo Jul 31 '21 at 18:43
I am misleading, my server is the router I access with the js client. So I need the setHeader in the client probably, but am not sure. The html is running in a node environment, and the header - `res.header()` - is only for this server environment if I want to access it from outside. – Timo Jul 31 '21 at 18:50

Enable CORS in Nodejs with expressjs4

1 Answers1

Linked