Fatal编程技术网
  • javascript/
  • Javascript Nodejs Express CORS与'；访问控制允许原点'；

Javascript Nodejs Express CORS与'；访问控制允许原点'；

javascript node.js express cors

Javascript Nodejs Express CORS与'；访问控制允许原点'；,javascript,node.js,express,http-headers,cors,Javascript,Node.js,Express,Http Headers,Cors,我正在尝试使用Angular 1、Nodejs和Express创建一个单页应用程序。我正在使用Angular的$HTTPPOST特性发布一个请求，其中我将请求中的头值传递给API端点 我在Chrome中遇到一条错误消息： XMLHttpRequest cannot load http://localhost:7878/EIAMIDSupportREST/EIAMIDSupport/updateEIAMID. The value of the 'Access-Control-Allow-Ori

我正在尝试使用Angular 1、Nodejs和Express创建一个单页应用程序。我正在使用Angular的$HTTPPOST特性发布一个请求，其中我将请求中的头值传递给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问题，我已经安装了npm库

在我的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>


var-app=angular.module（“app”，[]）；
app.controller（“HttpGetController”，函数（$scope，$http）{
$scope.SendData=函数（）{
var req={
方法：“POST”，
网址：'http://localhost:7878/EIAMIDSupportREST/EIAMIDSupport/updateEIAMID',
事实上，
标题：{
“内容类型”：“应用程序/x-www-form-urlencoded”，
“授权”：“基本用户：密码”
}
}
$http（请求）
.then（函数（数据、状态、标题、配置）
{
$scope.PostDataResponse=数据，
log（$scope.PostDataResponse）；
})
.catch（函数（数据、状态、标题、配置）
{
$scope.PostDataResponse=数据，
log（$scope.PostDataResponse）；
});
};
});
链接帐户

响应为：{{PostDataResponse}
然而，它仍然不起作用

有谁能告诉我需要如何以及在哪里更新代码来修复“访问控制允许源代码”通配符问题吗

您的
cors
软件包有一个origin选项，可更改“Access Control Allow origin”标题

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

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

还有更多细节，@muratgozel的回答部分正确，让我更深入地了解CORS以及问题产生的原因。当浏览器发送跨原点响应时，它会在标题中给出其原点。服务器响应还提供了一个名为“访问控制允许来源”的头。当您在express应用程序中使用实例化“cors”模块时，Access Control Allow Origin标头设置为“*”通配符，这基本上意味着此服务器资源（express应用程序的）是公共的，可以从任何地方的任何代码访问，但是，此通配符的限制是请求中不允许某些请求头，例如授权。来自index.html页面的请求有一组标题。您可以查看标题，也可以简单地按照@muratgozel所说的操作，实例化具有特定来源的cors，只需将credentials选项设置为true即可

app.use(cors({ origin: 'http://example.com' , credentials :  true}));
还有一个选项可以将
origin
设置为
true
，以反映由
req.header（'origin'）
定义的请求来源

如果有人想使用纯javascript解决方案，下面是我的Google Chrome（80）、Mozilla Firefox（72）和Microsoft Edge浏览器上的代码

开发平台 我正在使用NodeJS（12）开发一个小型的分布式restapi。如果这些服务部署在同一台机器上，则这组服务使用不同的端口号来分隔它们

另一方面，两个前端应用程序应该同时与多个服务交互。所以，我开始在集成阶段得到这个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“选项”方法发送一个飞行前请求。
此飞行前请求将根据其内部CORS策略告知浏览器是否会收到原始请求的答复

在本例中，我只是使用POST方法发送了一个JSON对象：


var xhr=new-XMLHttpRequest（）


xhr.open（方法，requestUrl）


xhr.setRequestHeader（'Content-type'，'text/plain'）

选项方法响应处理程序
为了相应地处理选项请求，您必须按如下方式签入服务器端：


if（req.method.toLowerCase（）=“options”）


res.writeHead（200）

就这样，没有额外的并发症

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


res.setHeader（'Access-Control-Allow-Headers'，'Content-Type，token'）

更多信息

我尝试了你的建议，但仍然得到相同的错误：在app.js中，我更改了-app.use（cors（））；使用app.use（cors（{origin:'}））；相反重新启动我的节点服务器，但仍然收到相同的错误。我做错了什么？我尝试了你的建议，并用app.use更新了app.js（cors（{origin:''，credentials:true，methods:'GET，PUT，POST，OPTIONS'，allowedHeaders:'Content Type，Authorization'}））；然而，在chrome inspector中，我的更改似乎没有生效。我错过了什么？请帮助：）读上面的答案，它似乎是正确的。你能在原始问题中添加一个编辑，并显示你收到的确切错误信息吗？还有node.js代码？信息越多越好。关于cors的最佳答案

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