带有 $http 的 Access-Control-Allow-Headers 不允许请求标头字段答案

【问题标题】：Request header field is not allowed by Access-Control-Allow-Headers with $http带有 $http 的 Access-Control-Allow-Headers 不允许请求标头字段
【发布时间】：2014-11-30 10:21:50
【问题描述】：

我正在使用 Postman Chrome 扩展程序对服务进行 POST，我得到了预期的响应。

但是，当我使用$http 执行相同的POST 请求时，一切都变得糟糕透顶。

我得到一个：

Request header field Engaged-Auth-Token is not allowed by Access-Control-Allow-Headers

Engaged-Auth-Token 是标题。

我不知道为什么 Postman 可以工作，而 Chrome 不能工作...

有什么想法吗？

【问题讨论】：

标签： angularjs post http-headers request http-post

【解决方案1】：

我相信在客户端的 $httpProvider 上配置 Access-Control-Allow-Headers 将不起作用。我认为需要在服务器上配置标头（作为响应标头）。例如，在 node-express 应用程序中，这可以通过中间件（例如）来完成，如下所示：

res.header('*')

或者（更有选择地）只是你需要的标题：

res.header('Engaged-Auth-Token, Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');

【讨论】：

【解决方案2】：

问题是由于请求标头中缺少Access-Control-Allow-Headers。为了解决这个问题，我们需要在请求头中添加Access-Control-Allow-Headers: *

将Access-Control-Allow-Headers 添加到http request header。您可以使用$httpProvider 在应用级别执行此操作。在您的应用配置部分添加以下行以添加此标头。

var app = angular.module("app", [
    "ngRoute",
    "app.controllers",
    "app.directives",
    "app.filters"
]);

app.config([
    "$routeProvider",
    "$httpProvider",
    function($routeProvider, $httpProvider){
        $httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = '*';
    }
]);

【讨论】：

我相信这需要阅读 $httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = '*';注意 * 周围的引号，否则你会得到各种各样的错误。

【解决方案3】：

如果在后端更改 cors.js 上使用sails api 并在此处添加您的令牌

module.exports.cors = {
  allRoutes: true,
  origin: '*',
  credentials: true,
  methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
  headers: 'Origin, X-Requested-With, Content-Type, Accept, Engaged-Auth-Token'
};

【讨论】：