Question

这是我在Angular 4应用程序中向http请求添加标头的方式：

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

当我通过Postman调用它时，我的API工作正常。当我检查

的结果时

request.getHeader("Authorization")

它返回正确的值，这是我的令牌。

但是当我通过前端应用程序调用API时

request.getHeader("Authorization")

返回null。并且还使用以下值创建名为“access-control-request-headers”的标头：“authorization，content-type”。我设置的令牌在哪里？为什么这个请求没有被授权获得结果，就像我使用Postman调用API一样？

Answer 1

尝试这样做。

private headers: Headers;

constructor(private http: Http) {
  this.headers = new Headers();
  this.headers.append('Content-Type', 'application/json');
  this.headers.append('Authorization', 'somekey ' + localStorage.getItem('token'));
}

public getUsers() {
  const options = new RequestOptions({
    headers: this.headers
  });
  return this.http.get(environment.apiUrl + 'users/all', options)
}

Answer 2

这是由浏览器机制引起的 CORS （跨源资源共享）问题。而且我认为这不是前端框架的问题。

有两种不同类型的请求：简单请求和预检请求。

当您向请求添加新标头时，它不再被视为简单请求。与“简单请求”不同，＆＃34; preflighted＆＃34;请求首先通过 OPTIONS 方法将HTTP请求发送到另一个域上的资源，以确定实际请求是否可以安全发送。跨站点请求是这样预检的，因为它们可能会对用户数据产生影响。

与简单请求一样，浏览器会将Origin标头添加到每个请求中，包括预检。预检请求作为HTTP OPTIONS请求。它还包含一些额外的标题和＆＃34; 访问控制请求标题＆＃34;是其中一个附加标头，它是包含在请求中的非简单标头的逗号分隔列表。在我的情况下，此标头的值为：＆＃34; 授权，内容类型＆＃34;。

因此，我正在检查的请求是预检的，而不是我发送到后端API的实际请求。

您可以用自己的方式处理此预检请求。就像避免过滤并在http方法为OPTIONS时设置状态200一样：

if("options".equalsIgnoreCase(request.getMethod())) {
    response.setStatus(HttpServletResponse.SC_OK);
} else {
    chain.doFilter(req, res);
}

这可能不是最好的解决方案，但是你不会得到＆＃34;预检的响应包含无效的HTTP状态代码401＆＃34;。

请告诉我您处理此预检请求的首选方式

以下是我用来塑造这个答案的链接。他们可以帮助您了解有关CORS的更多信息：

https://www.html5rocks.com/en/tutorials/cors/

http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Response for preflight has invalid HTTP status code 401 - Spring

向http请求添加其他标头

2 个答案: