简体   繁体   English

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

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

Setting the header works when I build the project's war via gradle and deploy it to tomcat, but for some reason, when I spin up webpack's development server for testing, I get the error: 当我通过gradle构建项目的战争并将其部署到tomcat时,设置标头即可工作,但是由于某些原因,当我启动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).

The frustrating thing is this has been intermittent. 令人沮丧的是,这一直是断断续续的。 First I had a JWT that was only 'xxx.yyy' and it worked. 首先,我有一个JWT,它只有“ xxx.yyy”,并且可以正常工作。 Then all of a sudden it didn't. 然后突然没了。 Then I realized I might need to include a fake signature. 然后我意识到我可能需要包括一个假签名。 So I changed it to 'xxx.yyy.zzz' and it worked! 所以我将其更改为“ xxx.yyy.zzz”,它可以正常工作! Then all of a sudden it didn't. 然后突然没了。 Then I thought maybe the fake signature still had to be the appropriate length for the rest of the JWT. 然后我认为,对于JWT的其余部分,伪造签名仍必须具有适当的长度。 So I increased the length, and it worked. 所以我增加了长度,并且奏效了。 Now it doesn't. 现在没有。

Here's my dev-proxy-settings.js: 这是我的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"
            }
        }
    }
};

Here's my use of angular2/http 这是我对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(...);

Am I missing something?? 我错过了什么吗?

The fake signature I added had an invalid character. 我添加的虚假签名包含无效字符。 I'm not sure which character wasn't allowed, but the fake signature I used was blablablafakesignatureblablablanotrealblabl . 我不确定不允许使用哪个字符,但是我使用的假签名是blablablafakesignatureblablablanotrealblabl Changing it to eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee fixed it. 将其更改为eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee修复了它。

I also added a description of allowed headers to my webpack config file's devServer configuration. 我还在我的webpack配置文件的devServer配置中添加了允许标头的描述。 Not sure if that helped too, but I'm not seeing that error anymore. 不确定是否也有帮助,但是我再也看不到该错误。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM