我已经使用Node/Express创建了一个小API,并试图使用Angularjs拉数据,但由于我的html页面在localhost:8888和节点API在端口3000上监听下运行,我得到了No 'Access-Control-Allow-Origin'。我尝试使用node-http-proxy和Vhosts Apache,但没有太多成功,请参阅下面的完整错误和代码。

XMLHttpRequest无法加载localhost:3000。被请求的资源上没有'Access-Control-Allow-Origin'标头。因此,不允许访问Origin 'localhost:8888'。”

// Api Using Node/Express    
var express = require('express');
var app = express();
var contractors = [
    {   
     "id": "1", 
        "name": "Joe Blogg",
        "Weeks": 3,
        "Photo": "1.png"
    }
];

app.use(express.bodyParser());

app.get('/', function(req, res) {
  res.json(contractors);
});
app.listen(process.env.PORT || 3000);
console.log('Server is running on Port 3000')

角码

angular.module('contractorsApp', [])
.controller('ContractorsCtrl', function($scope, $http,$routeParams) {

   $http.get('localhost:3000').then(function(response) {
       var data = response.data;
       $scope.contractors = data;
   })

HTML

<body ng-app="contractorsApp">
    <div ng-controller="ContractorsCtrl"> 
        <ul>
            <li ng-repeat="person in contractors">{{person.name}}</li>
        </ul>
    </div>
</body>

当前回答

我们将看看前两个答案是否接受我的编辑,但很可能您必须添加或使用127.0.0.1而不是localhost。

使用cors包,你甚至可以使用多个允许的来源:

app.use(
  cors({ origin: ["http://localhost:8888", "http://127.0.0.1:8888"] })
);

如果您希望允许任何内容,则可以使用origin:“*”。

要了解更多信息,请查看Web Dev Simplified的教程。

其他回答

接受的答案是好的,如果你喜欢更短的东西,你可以使用一个插件称为cors可用的Express.js。

对于这种特殊的情况,使用起来很简单:

var cors = require('cors');

// use it before all route definitions
app.use(cors({origin: 'http://localhost:8888'}));

(您可能需要使用127.0.0.1而不是localhost。)

请求源需要与允许的源相匹配,你也可以有多个:

app.use(
  cors({origin: ['http://localhost:8888', 'http://127.0.0.1:8888']})
);

在你的项目中安装cors依赖:

npm i --save cors

添加到您的服务器配置文件如下:

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

它适用于2.8.4 cors版本。

上面的答案对我来说很好,只是我需要将多个域名列入白名单。

此外,top answer还会受到这样一个事实的影响,即OPTIONS请求不是由中间件处理的,您不能自动获得它。

我将白名单域存储为allowed_origins在Express配置中,并根据origin头放置正确的域,因为Access-Control-Allow-Origin不允许指定多个域。

这是我最后得出的结论:

var _ = require('underscore');

function allowCrossDomain(req, res, next) {
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

  var origin = req.headers.origin;
  if (_.contains(app.get('allowed_origins'), origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }

  if (req.method === 'OPTIONS') {
    res.send(200);
  } else {
    next();
  }
}

app.configure(function () {
  app.use(express.logger());
  app.use(express.bodyParser());
  app.use(allowCrossDomain);
});

尝试在你的NodeJS/Express应用程序中添加以下中间件(为了方便起见,我添加了一些注释):

// Add headers before the routes are defined
app.use(function (req, res, next) {

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

    // 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();
});

(您可能需要使用127.0.0.1而不是localhost。)

当前端和后端运行在不同的端口上时,就会发生这种情况。由于CORS标头的缺失,浏览器会阻止来自后端的响应。解决方案是在后端请求中添加CORS标头。最简单的方法是使用cors的npm包。

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

这将在所有请求中启用CORS报头。有关更多信息,您可以参考cors文档

https://www.npmjs.com/package/cors