0

我想从 Angular 5 应用程序调用 Watson 对话 API，为此，我正在使用 Angular HttpClient。

下面是代码片段：

import { HttpClient, HttpHeaders } from '@angular/common/http';
const url = 'https://gateway.watsonplatform.net/conversation/api?version=2017-05-26';
const username = 'my-username';
const password = 'secret';
const headers = new HttpHeaders({
  Authorization: 'Basic ' + btoa(`${username}:${password}`)
});
this.httpClient.get('https://gateway.watsonplatform.net/conversation/api?version=2017-05-26', { headers: headers })
  .subscribe(res => {
    console.log(res);
  });

它应该调用 API 并返回响应，但它返回如下错误：

Failed to load https://gateway.watsonplatform.net/conversation/api?version=2017-05-26: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

该请求与 Postman 和 Node.js 请求包完美配合，但不适用于 Angular 5 应用程序。

示例 cURL 请求：

curl -u "{username}":"{password}" "https://gateway.watsonplatform.net/conversation/api/v1/{method}"

如果我在 chrome 中添加Allow-Control-Allow-Origin: *扩展名，上述请求工作正常，因此无法理解 Angular 应用程序有什么问题。

提前致谢。

4

1 回答 1

0

我已经找到了问题，它来自服务器端，Access-Control-Allow-Headers 没有从服务器端正确设置。

我试图设置“授权”标题，但它没有在“访问控制允许标题”中列出，这就是浏览器给出错误的原因。

在预检请求中，浏览器将只允许您从客户端（在我的情况下为 Angular）添加那些列在“Access-Control-Allow-Headers”中的标头。

于 2017-11-23T06:58:34.410 回答