Angular 2 http未设置标头

时间:2017-02-08 16:37:03

标签: angular http-headers

我正在设置我的标题和http调用:

 var headers = new Headers();
headers.set('Authorization','Bearer xxxxxxxxxxx'); 

this.http.get('http://localhost:8080/outputEndpoints', {
  headers: headers
}).
map(res => res.text())

.subscribe(
  data=> console.log(data),
  error=> console.log("Getting Error") 
);

有了这个,我期望标题为:

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:es,ca;q=0.8,en-GB;q=0.6,en;q=0.4,fr;q=0.2
Access-Control-Request-Headers:authorization, content-type
Authorization: "Bearer xxxxxxxxxxxx"
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:8080
Origin:http://localhost:3000
 Referer:http://localhost:3000/
 User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36    (KHTML,    like Gecko) Chrome/56.0.2924.87 Safari/537.36

相反,我得到以下内容(没有使用令牌授权):

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:es,ca;q=0.8,en-GB;q=0.6,en;q=0.4,fr;q=0.2
Access-Control-Request-Headers:authorization, content-type
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:8080
Origin:http://localhost:3000
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36   (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

编辑:

一般信息是:

Request URL:http://localhost:8080/outputEndpoints
Request Method:OPTIONS
Status Code:401 
Remote Address:[::1]:8080

所以OPTIONS调用失败了。在其他应用程序中,一旦OPTIONS调用被接受,它就会在GET请求中找到设置的身份验证令牌。这意味着由于某种原因,OPTION称其未被接受。

使用CURL或SOAP UI进行调用时,它工作正常,因此我认为它不是CORS的问题。我没错?

任何想法或指南都会非常有用。

4 个答案:

答案 0 :(得分:2)

我认为它是headers.append而不是headers.set。尝试更改您的方法,看看它是否有效。

答案 1 :(得分:2)

您应该在Header的构造函数中设置值,如下所示:

var headers = new Headers({'Authorization', 'Bearer XXXXXXX'});

或者你必须使用append方法:

var headers = new Headers();
headers.append('Authorization', 'Bearer XXXXXX');

由于问题改变而编辑:

由于我真的不知道你如何处理你的请求,我可以告诉你我在Spring后端提出的解决方案:

if ("OPTIONS".equals(request.method, ignoreCase = true)) {
    response.status = HttpServletResponse.SC_OK
} else {
    chain.doFilter(req, res)
}

所以在你的后端你应该检查请求方法,如果它等于" OPTIONS"你可以将响应状态设置为200,然后就完成了。

答案 2 :(得分:0)

按照本指南http://restlet.com/blog/2015/12/15/understanding-and-using-cors/,您可以阅读以下内容:

  

重要评论。执行时必须考虑到这一点   包含安全性的CORS请求,即授权标头,   OPTIONS请求不会包含它。所以你需要小心   处理预检的第一个OPTIONS请求时的安全性。   事实上,在此不能进行身份验证检查   水平。

因此第一个OPTION调用中没有Authorization标头。

答案 3 :(得分:0)

将此行添加到您的安全配置中:

<!-- AWeber Web Form Generator 3.0.1 --><form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<div style="display: none;"><input name="meta_web_form_id" type="hidden" value="604218668" /> <input name="meta_split_id" type="hidden" value="" /> <input name="listname" type="hidden" value="awlist4661276" /> <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&amp;preview=true" /> <input name="meta_adtracking" type="hidden" value="My_Web_Form" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." /></div>
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element"><label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534028" class="text" style="width: 200px;" tabindex="500" name="name" type="text" value="First Name..." /></div>
</div>
<div class="af-element" style="text-align: center;"><label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534029" class="text" style="width: 460px;" tabindex="501" name="email" type="text" value="Best Email..." /></div>
</div>
<div class="af-element buttonContainer" style="text-align: left;"><input id="af-submit-image-604218668" class="image" style="background: none; max-width: 100%;" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image" />
<div class="af-clear">We respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center;">
<div class="af-clear">&nbsp;</div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" /></div>
</form>
<script type="text/javascript">// <![CDATA[
// Special handling for facebook iOS since it cannot open new windows
(function() {
    if (navigator.userAgent.indexOf('FBIOS') !== -1 || navigator.userAgent.indexOf('Twitter for iPhone') !== -1) {
        document.getElementById('af-form-604218668').parentElement.removeAttribute('target');
    }
})();
// ]]></script>
<script type="text/javascript">// <![CDATA[
(function() {
        var IE = /*@cc_on!@*/false;
        if (!IE) { return; }
        if (document.compatMode && document.compatMode == 'BackCompat') {
            if (document.getElementById("af-form-604218668")) {
                document.getElementById("af-form-604218668").className = 'af-form af-quirksMode';
            }
            if (document.getElementById("af-body-604218668")) {
                document.getElementById("af-body-604218668").className = "af-body inline af-quirksMode";
            }
            if (document.getElementById("af-header-604218668")) {
                document.getElementById("af-header-604218668").className = "af-header af-quirksMode";
            }
            if (document.getElementById("af-footer-604218668")) {
                document.getElementById("af-footer-604218668").className = "af-footer af-quirksMode";
            }
        }
    })();
// ]]></script>
<!-- /AWeber Web Form Generator 3.0.1 -->