为什么在 webpack 上开发时 angular2/http 不能设置 header？

Question

当我通过 gradle 构建项目的 war 并将其部署到 tomcat 时，设置 header 有效，但由于某种原因，当我启动 webpack 的开发时服务器测试，我收到错误：

EXCEPTION: SyntaxError: Failed to execute 'setRequestHeader' on 
'XMLHttpRequest': 'Bearer xxx.yyy.zzz' is not a valid HTTP header field value.
in [null] (browser_adapter.ts:73).

令人沮丧的是这是断断续续的。首先，我有一个只有 'xxx.yyy' 的 JWT，它可以工作。然后突然就没有了。然后我意识到我可能需要包含一个假签名。所以我将其更改为 'xxx.yyy.zzz' 并且成功了！然后突然就没有了。然后我想也许假签名仍然必须是 JWT 其余部分的适当长度。所以我增加了长度，它奏效了。现在没有了。

这是我的 dev-proxy-settings.js:

module.exports = {
    settings: {
        '/*': {
            target: 'http://localhost:3000/',
            headers: {
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Methods": "GET, POST",
                "Access-Control-Allow-Headers": "Content-Type, Authorization"
            }
        }
    }
};

这是我对 angular2/http

的使用

import {Headers, Http, RequestMethod} from 'angular2/http';
import {RequestOptions, Response} from 'angular2/http';

...

var headers = new Headers({
    'Content-Type': 'application/json',
    'Authorization': 'Bearer xxx.yyy.zzz'
});
var options = new RequestOptions({
    headers: headers,
    method: RequestMethod.Get,
    url: '/some/url'
});
let httpResponse = this.http.request(options.url, options).map(...);

我是不是漏掉了什么？？

Answer 1

我添加的假签名包含无效字符。我不确定不允许使用哪个字符，但我使用的假签名是 blablablafakesignatureblablablanotrealblabl。将其更改为 eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 修复了它。

我还在我的 webpack 配置文件的 devServer 配置中添加了允许 headers 的描述。不确定这是否也有帮助，但我再也看不到该错误了。

devServer: {
    port: metadata.port,
    host: metadata.host,
    // contentBase: 'src/',
    historyApiFallback: true,
    watchOptions: { aggregateTimeout: 300, poll: 1000 },
    headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST",
        "Access-Control-Allow-Headers": "Content-Type, Authorization"
    },
    proxy: proxySettings.settings
},

为什么在 webpack 上开发时 angular2/http 不能设置 header？

Why can't angular2/http set header during development on webpack?

http-headers

typescript

webpack-dev-server

angular