Angular 2基本身份验证不起作用 [英] Angular 2 Basic Authentication not working

问题描述

我试图用Angular2连接/执行一个POST请求到一个API，这是一个非常简单的带有基本认证密码的API。
在api上禁用密码时，一切都按预期工作。但是，当我启用基本认证的Angular不能再连接到API。在邮差中一切正常。

我有两个头文件Content-Type和Authorization

pre> headers.append（Content-Type，application / x-www-form-urlencoded）;


我已经试过了这两个标头。

  headers.append（授权，基本+ btoa（用户名+：+密码））; 
 headers.append（Authorization，Basic VXNlcm5hbWU6UGFzc3dvcmQ =）; 
  

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

 访问控制请求标题：授权，内容类型
  

Raw标题：

 ＃请求头
选项/装运HTTP / 1.1 
主机：api.example.com 
连接：保持活动
访问控制请求方法：POST 
起源：http：// localhost：4200 
 User-Agent：Mozilla / 5.0（Macintosh; Intel Mac OS X 10_11_5）AppleWebKit / 537.36（KHTML，如Gecko）Chrome / 51.0.2704.106 Safari / 537.36 
访问-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 
  

希望有人可以帮忙解决方案

m标头到您的请求：

  import'Injectable} from'@ angular / core'; 
从'@ angular / http'导入{Http，Headers}; 
 
 @Injectable（）
导出类ApiService {
 
构造函数（private _http：Http）{} 
 
 call（url）：可观察到的与LT;任何> {
 let username：string ='username'; 
让password：string ='password'; 
让header：Headers = new Headers（）; 
 headers.append（Authorization，Basic+ btoa（username +：+ password））; 
 headers.append（Content-Type，application / x-www-form-urlencoded）; 
返回this._http.post（url，data，{headers：headers}）
} 
} 
  

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

I'm trying to connect/ do a POST request to an API with Angular2, It's a very simple API with a Basic Authentication password. When disabling the password on the api everything works like expected. But when I enable the Basic Authentication Angular can no longer connect to the API. In Postman everything works. I tried the following without success.

I've got two headers "Content-Type" and "Authorization"

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

I've tried these two headers.

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

The only thing I can find is that in the RAW request headers there's only a line with the header names but the values are missing:

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

Raw headers:

#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

Hope someone can help

解决方案

Simplified version to add custom headers to your request:

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

It's hard to determine where you went wrong, because the lack of code of the actual http call you do. But this example should work for you

这篇关于Angular 2基本身份验证不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！