No 'Access-Control-Allow-Origin' header is present on the requested resource in Node.js

Question

I'm trying to use basic auth to login to my grafana page using Node.js and express, but it shows me an error like below.

The 'localhost:4000' is holding my app.js and 'localhost:5000' is from nginx that proxy_pass to my grafana page(localhost:8080)

Here is my basic auth code

app.get('/grafana', isLoggedIn, function(req, res, next){
  console.log('Accessing to grafana');
  var auth = "Basic " + new Buffer('admin' + ":" + 'admin').toString("base64");
  request({
    url: 'http://localhost:5000',
    headers:{
      "Authorization": auth
    }             //passing through here
  }, function(err, resp, body){

what is my problem here..? I added the Access-Control-Allow-Origin and etc like below, but doesn't work at all..

app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', "*");
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Origin, Basic, X-Requested-With, Content-Type, Accept, Authorization');
  res.header('Access-Control-Allow-Credentials', 'true');
  next();
});

Does anybody have an idea for this...?

Thank you..

The error states that the client side code is trying to communicate with `localhost:8080` directly, not through the proxy on `localhost:5000`. — robertklep, Mar 07 '17 at 11:37

score 2 · Accepted Answer · edited May 23 '17 at 11:47

i think, you should install cors.

npm install cors

Simple Usage :

var express = require('express');
var cors = require('cors');
var app = express();
app.use(cors());


app.use(function (req, res, next) {

        // Website you wish to allow to connect
        res.setHeader('Access-Control-Allow-Origin', '*');

        // Request methods you wish to allow
        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

        // Request headers you wish to allow
        res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

        // Set to true if you need the website to include cookies in the requests sent
        // to the API (e.g. in case you use sessions)
        res.setHeader('Access-Control-Allow-Credentials', true);

        // Pass to next layer of middleware
        next();
    });

Can ref : cors more than : here

Thanks for answering my question! :) um.. I tried already using cors like var cors = require('cors'); var corsOption = { origin: 'http://localhost:4000'}; and I put app.use(cors(corsOption)); inside of the function(err, resp, body) — paulc1111, Mar 07 '17 at 09:48

score 1 · Answer 2 · edited May 23 '17 at 11:55

This looks similar to this question about using an Apache proxy for Grafana.

There is an example for nginx in the docs here:

http://docs.grafana.org/v1.9/installation/#graphite-server-config

auth_basic            "Restricted";
auth_basic_user_file  /path/to/my/htpasswd/file;

if ($http_origin ~* (https?://[^/]*\.somedomain\.com(:[0-9]+)?)) {  #Test if request is from allowed domain, you can use multiple if
    set $cors "true";                                               #statements to allow multiple domains, simply setting $cors to true in each one.
}

if ($cors = 'true') {
    add_header  Access-Control-Allow-Origin $http_origin;           #this mirrors back whatever domain the request came from as authorized, as
    add_header  "Access-Control-Allow-Credentials" "true";          #as long as it matches one of your if statements
    add_header  "Access-Control-Allow-Methods" "GET, OPTIONS";
    add_header  "Access-Control-Allow-Headers" "Authorization, origin, accept";
}

How is your nginx proxy configured?

You forgot the "ifs are evil" https://www.nginx.com/resources/wiki/start/topics/depth/ifisevil/ — Bernard, Jul 18 '17 at 05:45

No 'Access-Control-Allow-Origin' header is present on the requested resource in Node.js

2 Answers2