角度/节点CORS问题

Question

我正在构建一个 web 应用程序，在服务器端使用 node js，在客户端使用 angular。

我在不同域上运行服务器，在其他域上运行客户端。

我的服务器端代码：

var express = require('express');
var app = express();
var http = require("http").createServer(app);
var request = require('request');

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

app.get('/api/hello', function(req, res){
  var data = {'message': 'Server is running'}
  res.jsonp(data);
});

http.listen(5000);

在客户端 (Angular)。

angular.controller('myController', function($state, $http){
  $http.get('http://localhost:5000/api/hello').success(function(response, status) {
    console.log(responce);
  }).error( function(error, status) {
    console.log(error)
  });
});

我的服务器在不同域的端口 5000 上运行，而我的客户端在端口 4000 上运行。

当我从客户端发送上述请求时，在浏览器控制台中出现以下错误，

XMLHttpRequest 无法加载 http://localhost:5000/api/hello。回复 预检请求未通过访问控制检查：通配符 '*' 不能在 'Access-Control-Allow-Origin' 标头中使用 凭据标志为真。原点“http://localhost:4000”是 因此不允许访问。

我对 ionic 应用也有同样的问题。

这背后的原因可能是什么？

我正在从多个域以及移动和网络等不同应用程序访问这些 API。

Answer 1

您可以使用cors，如下所示：

安装 cors 模块

npm install --save cors

服务器代码

 var express = require('express');
 var cors = require('cors');


 var app = express();     

 app.use(cors());

 // others code

角度

angular.controller('myController', function($state, $http){

   $http
     .get('http://localhost:5000/api/hello')
     .then(function(response) {
          console.log(responce);
       }, function(error, status) {
          console.log(error)
       });
});

Answer 2

在路由中，我创建了一个名为 corsheaders.js 的文件 其中包含

module.exports = function (req, res, next) {
    if (allowedHosts.indexOf(req.headers.origin) > -1) {
        res.header('Access-Control-Allow-Origin', req.headers.origin);
        res.header('Access-Control-Allow-Credentials', true);
        res.header('Access-Control-Allow-Methods', 'GET,POST,DELETE,OPTIONS,PUT');
        res.header('Access-Control-Allow-Headers', 'Content-Type');
    }
    next();
};

这里 allowedHosts 是一个数组，其中包含我允许的域，并且在 app.js 中我将此文件用作

app.use(require('./routes/corsheaders'));

Answer 3

在该错误中，您的 Access-Control-Allow-Credentials 标头可能会返回为 true？您的回复包含哪些标题？

在添加标题时尝试添加res.header('Access-Control-Allow-Credentials', false);，看看是否能解决该特定错误。

另外，您包含 http.createServer(app) 代码是否有原因？ ExpressJS 应用程序通常是通过直接调用 app.listen 来启动的，这很可能是问题所在。

app.listen(5000, function () {
  console.log('Example app listening on port 5000!');
});