Question

我正在尝试使用Angular 1，Nodejs和Express创建单页面应用。我正在使用Angular的$ http post功能发布请求，我将请求中的标头值传递给API端点。

我在Chrome中遇到错误消息：

XMLHttpRequest cannot load 
http://localhost:7878/EIAMIDSupportREST/EIAMIDSupport/updateEIAMID. The 
value of the 'Access-Control-Allow-Origin' header in the response must not 
be the wildcard '*' when the request's credentials mode is 'include'. Origin 
'http://localhost:3000' is therefore not allowed access. The credentials 
mode of requests initiated by the XMLHttpRequest is controlled by the 
withCredentials attribute.

使用此请求正文：

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,PATCH,DELETE
Access-Control-Allow-Headers: Content-Type
Allow: POST
Content-Type: text/html; charset=utf-8
Content-Length: 4
Date: Tue, 23 May 2017 23:32:15 GMT
Connection: keep-alive

为了解决CORS问题，我已经安装了cors库。

在我的app.js中，我添加了以下几行：

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

这是我的完整app.js：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');

var cons = require('consolidate');
//enable CORS 
var cors = require('cors');
var app = express();
app.use(cors({ origin: 'http://localhost:3000' , credentials :  true,  methods: 'GET,PUT,POST,OPTIONS', allowedHeaders: 'Content-Type,Authorization' }));
// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

这是我的index.html页面

<html>
<head>
<script 

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
   app.controller("HttpGetController", function ($scope, $http) {
       $scope.SendData = function () {
         var req = {
          method: 'POST',
          url: 'http://localhost:7878/EIAMIDSupportREST/EIAMIDSupport/updateEIAMID',
          withCredentials: true,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization': 'Basic user:password'
          }
         }
         $http(req)
           .then(function(data, status, header, config)
             {
               $scope.PostDataResponse = data,
               console.log($scope.PostDataResponse);
             })
             .catch(function(data, status, header, config)
             {
                $scope.PostDataResponse = data,
                console.log($scope.PostDataResponse);
             });

       };

     });
</script>
</head>
<body>
  <div ng-app="app">
    <div ng-controller="HttpGetController">
      <button  ng-click="SendData()" >Link Accounts</button>
      <hr />AND THE RESPONSE IS:{{ PostDataResponse }}
    </div>
  </div>
</body>
</html>

然而，它仍然无效。

任何人都可以建议我如何以及在何处更新我的代码以修复“Access-Control-Allow-Origin”通配符问题？

Answer 1

虽然@muratgozel的答案部分正确，但让我更深入地了解CORS以及问题导致的原因。当您的浏览器发送跨源响应时，它会在标头中显示它的Origin。服务器响应还提供了一个名为Access-Control-Allow-Origin的标头。当您使用快速应用程序中的'cors'模块实例化时，Access-Control-Allow-Origin标头被设置为'*'通配符，这基本上意味着它（快递应用程序的）服务器资源是公共的并且可以可以从任何地方的任何代码访问，但此通配符的限制是请求中不允许某些请求标头，如授权。您在index.html页面中的请求包含了一组标题。您应该查看标题，或者您可以简单地执行@muratgozel所说的并使用特定来源实例化cors除了将凭证选项设置为true

app.use(cors({ origin: 'http://example.com' , credentials :  true}));

Answer 2

您的cors软件包有一个origin选项，用于更改“Access-Control-Allow-Origin”标头。

指定启动cors（）函数的原点选项：

app.use(cors({ origin: 'http://example.com' }));

the cors package npm page

还有更多细节

Answer 3

还有一个选项，可以将origin设置为true，以反映由req.header('Origin')定义的请求来源。

app.use(cors({ origin: true, credentials: true }));

Answer 4

只要有人想使用基于JavaScript的纯解决方案，这就是在我的Google Chrome（80），Mozilla Firefox（72）和Microsoft Edge浏览器上运行的代码。

开发平台

我正在使用NodeJS（12）开发小型分布式REST API。如果将服务部署在同一台计算机上，则这组服务使用不同的端口号将它们分开。

另一方面，几个前端应用程序应同时与许多服务交互。因此，我开始在集成阶段收到此CORS错误。我为javascript找到的解决方案如下。

服务器端代码

在这里，技巧很简单。您只想 在每个响应中添加以下行 。

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4000');

res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Accept');

res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

注意：res是HTTP响应对象。

客户端代码

在这种情况下，请求将像往常一样被编码。我们唯一需要知道的是，浏览器将在我们要发送的每个请求之前，先使用HTTP“ OPTIONS”方法发送一个预检请求。根据其内部CORS政策，此预检请求将告知浏览器是否将收到您原始请求的答案。

在此示例中，我仅使用POST方法发送了一个JSON对象：

var xhr = new XMLHttpRequest();

xhr.open(method, requestUrl);

xhr.setRequestHeader('Content-type', 'text/plain');

OPTIONS方法响应处理程序

为了相应地处理OPTIONS请求，您必须按以下方式在服务器端签入：

if (req.method.toLowerCase() == 'options')

res.writeHead(200);

就是这样，没有多余的并发症。

代币

当您需要通过标题发送令牌时，必须将“令牌”添加到“选项”响应中，如下所示：

res.setHeader('Access-Control-Allow-Headers', 'Content-Type, token');

Nodejs使用'Access-Control-Allow-Origin'快速解决CORS问题

4 个答案:

开发平台

服务器端代码

客户端代码

OPTIONS方法响应处理程序

代币

更多信息