Using CORS Still Give Cross Origin Error

Question

I'm trying to access a node route through angular $http using the cors module. I've tried a simple

app.use(cors());

but still get the error. And I've tried adding from the cors documentation a whitelist of URLs

var corsOptions = {
  origin: function(origin, callback){
    var originIsWhitelisted = whitelist.indexOf(origin) !== -1;
    callback(null, originIsWhitelisted);
  }
};

app.get('/someroute/:someparam/', cors(corsOptions), function(req, res, next){
  mymodule.getData(req.params.someparam, function(err, data){
      if (err){
        console.log('error with route', err);
      }else{
        res.json({result: data});
      }
  });
});

But I'm still getting the error

XMLHttpRequest cannot load localhost:8888/someroute/undefined. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

I thought that using the cors module was meant to avoid this problem. How can I solve?

How on earth are you loading your web app into your browser? Your URL (as quoted in the error message) doesn't appear to have any scheme associated with it at all, and the error message is complaining you aren't using HTTP. — Quentin, Dec 15 '15 at 16:34
@Pointy This is all in my `server.js` file, so when I spool up my server with `node server.js` in Terminal, shouldn't that exist server-side? — 1252748, Dec 15 '15 at 16:34
@Quentin App is loaded in browser with `app.get('/', function(req, res){ res.sendfile('./index.html'); });` so I go to localhost:8888 and i see then index page. There's an ng-click on a button on that page which does an `$http` get to the route I showed in the question. — 1252748, Dec 15 '15 at 16:36
@thomas OK it wasn't 100% clear that that's what was going on, so that part makes sense at least. — Pointy, Dec 15 '15 at 16:37
@thomas — So you load the app by visiting `http://localhost:8888` and then you access `http://localhost:8888/someroute/undefined` with JS? That isn't a cross origin request. I don't understand how that could be generating the error you describe (CORS shouldn't even be a factor). — Quentin, Dec 15 '15 at 16:39
@Quentin I think it might be something with Chrome. It's not the first time I have encountered it iirc. — 1252748, Dec 15 '15 at 16:43

apsillers · Accepted Answer · 2015-12-15T16:50:26.200

3

The problem here is that your client needs to make a request for the URL

http://localhost:8888/someroute/undefined

Instead, your client is making a request for

localhost:8888/someroute/undefined

which the browser interprets as a request for the host 8888 using the scheme localhost. However, localhost isn't a scheme that Chrome supports for CORS; only things like http, https, data are.

Somewhere, your client-side code does something like

xhr.send("localhost:8888/...")

but it needs a leading scheme, like http:// or https://.

Note that you get a similar error if you try to request a resource with a file or about scheme.

edited Dec 15 '15 at 16:50

answered Dec 15 '15 at 16:43

apsillers

112,806
17
235
239

So how can I solve this? I've tried adding `http://` to the beginning of the whitelist URL and the `$http.get()`, but it seemed to get confused about where to look for the route. – 1252748 Dec 15 '15 at 16:47
1

Your client needs to *request* the right thing. Your request possibly isn't even making it to the server. Whether or not it is, Chrome is shutting down the request because you're doing `xhr.send("localhost:8888/...")` somewhere, and Chrome sees that as an illegal `localhost` scheme. – apsillers Dec 15 '15 at 16:48
It was because the parameter I was passing to the route is the location of a directory and I hadn't URI encoded it, so it didn't know where the hell it was going. When I encode it and pass it through the route to the node module, everything is processed and looks to be working great! Thanks for the help! – 1252748 Dec 15 '15 at 16:50

Using CORS Still Give Cross Origin Error

1 Answers1

Linked