NodeJs No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I am trying to access an rss feed using an Ajax request on the client broswer.

$.ajax({
type: 'GET',
url: 'http://feeds.bbci.co.uk/news/business/rss.xml?edition=uk',
crossDomain: true,
dataType: 'xml',
success: function(responseData, textStatus, jqXHR) {
    console.log(responseData)
},
error: function (responseData, textStatus, errorThrown) {
    alert('failed.');
}
});

This is giving me the 'Access-Control-Allow-Origin' error.

I have installed the cors package so it should be enabled on my server, am i missing something?

server.js file

var express = require('express');
var basicAuth = require('express-basic-auth')
var bodyParser = require('body-parser')
var cors = require('cors');
var app = express();

app.use(cors()); 

app.get('/', function (req, res) {
//    res.send('Hello World');
    res.sendFile(__dirname + '/views/index.html');
})

var routes = require('./routes');
app.use('/api', routes);


var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port

   console.log("App listening at http://%s:%s", host, port)
})

Edit* Full error XMLHttpRequest cannot load http://feeds.bbci.co.uk/news/business/rss.xml?edition=uk . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:8081 ' is therefore not allowed access.

Answer 1

Because http://feeds.bbci.co.uk/news/business/rss.xml?edition=uk doesn't send the Access-Control-Allow-Origin response header, you need to instead make the request through proxy. Do that by changing the value of url in your frontend JavaScript code like this:

url: 'https://cors-anywhere.herokuapp.com/http://feeds.bbci.co.uk/news/business/rss.xml?edition=uk',

The https://cors-anywhere.herokuapp.com/http://feeds.bbci.co.uk/… URL will cause the request to go to https://cors-anywhere.herokuapp.com , a open/public CORS proxy which then sends the request on to the http://feeds.bbci.co.uk/… URL you actually want to request.

And when that proxy gets the response, it'll take it and add the Access-Control-Allow-Origin response header to it and then pass that back to your requesting frontend code as the response.

That response with the Access-Control-Allow-Origin response header is what the browser sees, so the error message the browser is showing you now goes away, and the browser allows your frontend JavaScript code to access the response.

Or use the code from https://github.com/Rob--W/cors-anywhere/ or such to set up your own proxy.

The reason you need a proxy is that, because http://feeds.bbci.co.uk/… itself doesn't send the Access-Control-Allow-Origin response header, your browser will refuse to let your frontend JavaScript code access a response from that server cross-origin.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS has more details.