javascript - NodeJs 请求的资源上不存在 'Access-Control-Allow-Origin' header

Question

我正在尝试在客户端浏览器上使用 Ajax 请求访问 rss feed。

$.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.');
}
});

这给了我“Access-Control-Allow-Origin”错误。

我已经安装了 cors 软件包，因此应该在我的服务器上启用它，我是否遗漏了什么？

server.js 文件

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

编辑* 完整错误 XMLHttpRequest 无法加载 http://feeds.bbci.co.uk/news/business/rss.xml?edition=uk 。请求的资源上不存在“Access-Control-Allow-Origin” header 。来源'http://localhost:8081 ' 因此不允许访问。

Answer 1

由于 http://feeds.bbci.co.uk/news/business/rss.xml?edition=uk 不发送 Access-Control-Allow-Origin 响应 header ，因此您需要通过代理发出请求。通过更改前端 JavaScript 代码中 url 的值来实现此目的，如下所示:

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

https://cors-anywhere.herokuapp.com/http://feeds.bbci.co.uk/... URL 将使请求转到 https://cors-anywhere.herokuapp.com，这是一个开放/公共(public) CORS 代理，然后该代理将请求发送到您实际想要请求的 http://feeds.bbci.co.uk/... URL。

当该代理获得响应时，它会获取该响应并向其添加 Access-Control-Allow-Origin 响应 header ，然后将其作为响应传递回您的请求前端代码。

带有 Access-Control-Allow-Origin 响应 header 的响应是浏览器看到的内容，因此浏览器现在向您显示的错误消息会消失，并且浏览器允许您的前端 JavaScript 代码访问该响应。

或者使用 https://github.com/Rob--W/cors-anywhere/ 中的代码或类似的方法来设置您自己的代理。

您需要代理的原因是，由于 http://feeds.bbci.co.uk/... 本身不会发送 Access-Control-Allow-Origin 响应 header ，因此您的浏览器将拒绝让您的前端 JavaScript 代码访问来自该服务器跨源的响应。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS有更多详细信息。