Angular 2 http未设置标头答案

【问题标题】：Angular 2 http not setting headerAngular 2 http未设置标头
【发布时间】：2017-06-26 09:39:06
【问题描述】：

我正在像这样设置我的标头和 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 的问题。我是对的？

任何想法或指南都会很有帮助。

【问题讨论】：

您找到解决方案了吗？同样的问题

标签： angular http-headers

【解决方案1】：

我认为是headers.append 而不是headers.set。尝试改变你的方法，看看它是否有效。

【讨论】：

我都试过了，但都不起作用。打印标题选项时，它看起来没问题，但是当我在网络选项卡中检查它时，它不存在。

【解决方案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，然后您就完成了。

【讨论】：

我已经使用了所有已知的方法（构造函数、追加和设置），但它们都不起作用。在控制台中打印标题时，它看起来工作正常，但在导航选项卡中没有授权标题（如控制台中所示）
正如我在问题中所扩展的那样，它不会通过 OPTIONS 调用，但标题设置正确。那么问题是为什么在第一个 OPTIONS 调用中失败了。

【解决方案3】：

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

一个重要的评论。您必须考虑到，在执行时包含安全性的 CORS 请求，即 Authorization 标头， OPTIONS 请求不会包含它。所以你需要小心处理预检请求的第一个 OPTIONS 请求时的安全性。事实上，此时无法进行身份验证检查级别。

所以在第一个 OPTION 调用中没有 Authorization 标头。

【讨论】：

但是你是怎么解决的？你能显示代码吗？，我从我的服务器收到错误，而不是来自邮递员或 curl，只是使用 angular 4.1.2
api程序员告诉我OPTIONS必须有授权码，所以api是这样工作的，但是我的浏览器不发送带有auth的OPTIONS，如何强制我的浏览器这样做？
如果没有jwt授权，会发送一个没有OPTIONS的正常请求

【解决方案4】：

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

.antMatchers(HttpMethod.OPTIONS,"/**").permitAll()

【讨论】：