Question

我尝试使用Angular2连接/向API发出POST请求，它是一个带有基本身份验证密码的非常简单的API。在api上禁用密码时，一切都按预期工作。但是当我启用基本身份验证时，Angular无法再连接到API。在邮递员一切正常。我尝试了以下但没有成功。

我有两个标题＆＃34; Content-Type＆＃34;和＃34;授权＆＃34;

headers.append("Content-Type", "application/x-www-form-urlencoded");

我已尝试过这两个标题。

headers.append("Authorization", "Basic " + btoa(Username + ":" + Password)); 
headers.append("Authorization", "Basic VXNlcm5hbWU6UGFzc3dvcmQ=");

我唯一能找到的是，在RAW请求标题中，只有一行包含标题名称，但缺少值：

Access-Control-Request-Headers: authorization, content-type

原始标题：

#Request Headers
OPTIONS /shipment HTTP/1.1
Host: api.example.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36
Access-Control-Request-Headers: authorization, content-type
Accept: */*
Referer: http://localhost:4200/address
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,nl;q=0.6

希望有人可以提供帮助

Answer 1

为您的请求添加自定义标头的简化版本：

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';

@Injectable()
export class ApiService {

   constructor(private _http: Http) {}

   call(url): Observable<any> {
      let username: string = 'username';
      let password: string = 'password';
      let headers: Headers = new Headers();
      headers.append("Authorization", "Basic " + btoa(username + ":" + password)); 
      headers.append("Content-Type", "application/x-www-form-urlencoded");
      return this._http.post(url, data, {headers: headers})
    }
}

很难确定出错的地方，因为缺少您实际http电话的代码。但是这个例子应该适合你

Answer 2

我的申请中遇到了同样的问题。

正如您所看到的，发出的请求不是POST而是OPTION（预验证）

https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS

您必须在API端允许OPTIONS请求。如果你有Spring应用程序，你可以将它添加到Spring Security配置中：

    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
                .authorizeRequests()
                **.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()**
(..)

}

就我而言，它有效

Answer 3

这解决了我的问题：
Angular2 http post - how to send Authorization header?

确定。我发现了问题。

它不在Angular方面。说实话，完全没有问题。

我无法成功执行请求的原因是我的服务器应用无法正确处理OPTIONS请求。

为什么选择OPTIONS，而不是POST？我的服务器应用程序位于不同的主机上，然后是前端。由于CORS，我的浏览器将POST转换为OPTION：http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

借助这个答案：Standalone Spring OAuth2 JWT Authorization Server + CORS

我在服务器端应用程序上实现了正确的过滤器。

感谢@Supamiu - 指责我的人，我根本不发送POST。

Answer 4

jrcastillo建议了另一个选项here

我花了 这么多小时 试图解决这个问题，而这一个班轮解决了我的问题。

@Override
public void configure(WebSecurity web) throws Exception {
    web.ignoring().antMatchers(HttpMethod.OPTIONS, "/**");
}

最后我有点具体，因为这影响了我的 / login 路径，所以我做了以下事情：

@Override
public void configure(WebSecurity web) throws Exception {
    web.ignoring().antMatchers(HttpMethod.OPTIONS, "/api/**");
}

Answer 5

问题在于后端服务器。任何浏览器发送预检请求，发出跨源请求。在这种情况下，后端服务器未成功处理预检请求。尝试在后端服务器上执行cors配置。这将解决这个问题。

Angular 2基本身份验证无效

5 个答案: