向HTTP请求添加其他标头 [英] Adding additional headers to an http request
问题描述
这是我在Angular 4应用程序中向HTTP请求添加标头的方式:
This is the way I add headers to an http-request in my Angular 4 application:
constructor(private http: Http) { }
getUsers() {
const headers = new Headers(
{
'Content-Type': 'application/json',
'Authorization': 'somekey ' + localStorage.getItem('token')
});
return this.http.get(environment.apiUrl + 'users/all', {headers: headers})
}
当我通过邮递员调用它时，我的API可以正常工作.当我检查结果时
My API works fine when I call it via Postman. And when I check the result of
request.getHeader("Authorization")
它返回正确的值，这是我的令牌.
it returns back the proper value which is my token.
但是当我通过前端应用程序调用API
But when I call the API via frontend application
request.getHeader("Authorization")
返回空值.并且还创建一个名为"access-control-request-headers"的标头，其值为:"authorization，content-type".那我设置的令牌在哪里?为什么不像我使用Postman调用API一样授权该请求获得结果?
returns null. And also creates a header named "access-control-request-headers" with this value: "authorization,content-type". Where is the token I set then? And why this request is not authorized to get the result just like when I call the API using Postman?
推荐答案
这是由浏览器的机制引起的 CORS (跨源资源共享)问题.而且我相信这不是前端框架的问题.
It was a CORS (Cross-Origin Resource Sharing) problem causing by the browser's mechanism. And I believe it's not a matter of frontend framework.
有两种不同类型的请求:简单请求和已预告请求.
There are two different types of requests: Simple Requests and Preflighted Requests.
当您向请求中添加新标头时，该请求将不再被视为简单请求.并且与简单请求"不同，预检"请求首先通过 OPTIONS 方法将HTTP请求发送到另一个域上的资源，以确定实际请求是否可以安全发送.跨站点请求这样被预检，因为它们可能会对用户数据产生影响.
When you add new headers to a request, it won't be counted as a simple request anymore. And Unlike "simple requests", "preflighted" requests first send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this, since they may have implications to user data.
类似于简单的请求，浏览器将Origin标头添加到每个请求(包括预检).印前检查请求是作为HTTP OPTIONS请求发出的.它还包含一些其他标头，" Access-Control-Request-Headers "是这些标头之一，它是请求中包含的非简单标头的逗号分隔列表.在我的情况下，此标头的值为:"授权，内容类型".
Like the simple requests, the browser adds the Origin header to every request, including the preflight. The preflight request is made as an HTTP OPTIONS request. It also contains a few additional headers and "Access-Control-Request-Headers" is one of those additional headers which is a comma-delimited list of non-simple headers that are included in the request. In my case the value of this header is: "authorization,content-type".
因此，我正在检查的请求是预检的请求，而不是我发送给后端API的实际请求.
So, the request I was inspecting was the preflighted one not the actual-request I was sending to the backend-API.
您可以用自己的方式处理此预检的请求.就像在http方法为OPTIONS时避免过滤并设置状态200一样:
You may deal with this preflighted request in your own way. Just like avoid filtering and set status 200 when http method is OPTIONS:
if("options".equalsIgnoreCase(request.getMethod())) {
response.setStatus(HttpServletResponse.SC_OK);
} else {
chain.doFilter(req, res);
}
这可能不是最佳解决方案，但您不会收到对预检的响应具有无效的HTTP状态代码401".
Which might not be the best solution but you won't get "Response for preflight has invalid HTTP status code 401".
请告诉我您首选的处理此预备请求的方式
Please let me know what is your preferred way to deal with this preflighted request
这是我用来塑造此答案的链接.他们可以帮助您了解有关CORS的更多信息:
Here are the links I used to shape this answer. They can help you to learn more about CORS:
https://www.html5rocks.com/en/tutorials/cors/
http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
这篇关于向HTTP请求添加其他标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
