为什么在webpack开发期间无法设置angular2 / http标头?

时间:2016-06-06 20:31:56

标签: typescript angular http-headers webpack-dev-server

当我通过gradle构建项目的战争并将其部署到tomcat时,设置标头是有效的,但出于某种原因,当我启动webpack的开发服务器进行测试时,我收到错误:< / p>

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).

令人沮丧的是这是间歇性的。首先,我有一个只有&#39; xxx.yyy&#39;它起作用了。然后突然间它没有。然后我意识到我可能需要包含一个假签名。所以我把它改成了&#39; xxx.yyy.zzz&#39;它工作了!然后突然间它没有。然后我想也许假的签名仍然是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(...);

我错过了什么吗?

1 个答案:

答案 0 :(得分:1)

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

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

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
},