使用 Angular 7 使用 HTTP API 进行 POST 和命令错误标头丢失

Posted 2023-02-23

【中文标题】使用 Angular 7 使用 HTTP API 进行 POST 和命令错误标头丢失

【英文标题】：With Angular 7 use HTTP API for POST and command error headers missing

【发布时间】：2019-07-01 08:02:34

【问题描述】：

我使用 Angular 7 和 Orientdb 3.0.14。 我想在 localhost 中连接到我的数据库 demodb。

这是我的命令代码：

command(statement: string, success: (data: any) => void, error: (err: any) => void): void 
    this.url = this.url + 'sql/-/-1';
    this.headers = new HttpHeaders()
      .set('Access-Control-Allow-Origin', 'http://localhost:4200')
      .set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, DELETE')
      .set('Access-Control-Max-Age', '3600')
      .set('Access-Control-Allow-Credentials', 'true')
      .set('Access-Control-Allow-Headers', 'Content-Type, authorization')
      .set('Authorization', 'Basic ' + btoa(this.username + ':' + this.password))
      .set('Content-Type', 'application/json');
      console.log(this.headers);
    this.http.post(this.url,
      JSON.stringify('command': statement),
      headers: this.headers)
      .toPromise()
      .then(success)
      .catch(error);

但我在控制台上出现此错误：

HttpHeaders normalizedNames: Map(0), lazyUpdate: Array(7), headers: Map(0),lazyInit: HttpHeadersheaders:

地图（7）大小：（...）原型： 地图[[条目]]：

Array(7)0: "access-control-allow-origin" => 数组（1）键：“访问控制允许来源”值： ["http://localhost:4200"]1: "access-control-allow-methods" =>

Array(1)key: "access-control-allow-methods"value: ["POST, GET, 选项，删除"]

2: "access-control-max-age" => Array(1)key: “访问控制最大年龄”值：[“3600”]

3:"access-control-allow-credentials" => Array(1)key: “访问控制允许凭据”值：[“真”]

4:"access-control-allow-headers" => Array(1)键： “access-control-allow-headers”值：[“Content-Type，授权”]

5:"authorization" => Array(1)key:"authorization"value:["Basic YWRtaW46YWRtaW4="]

6: "content-type" => Array(1)key: “内容类型”值：[“应用程序/json”]长度：7lazyInit： nulllazyUpdate：nullnormalizedNames： Map(7) "access-control-allow-origin" => “访问控制允许来源”，“访问控制允许方法”=> “访问控制允许方法”，“访问控制最大年龄”=> “访问控制最大年龄”，“访问控制允许凭据”=> “访问控制允许凭据”，“访问控制允许标头”=> “访问控制允许标头”，...

proto：对象 core.js:16819 Angular 正在开发模式下运行。调用 enableProdMode() 到 启用生产模式。 localhost/:1 访问 XMLHttpRequest 在 'http://localhost:2480/command/demodb/sql/-/-1' 来自原点 'http://localhost:4200' 已被 CORS 策略阻止：响应 预检请求未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。

请参阅 Access-Control_allow-Origin 已进入标头..但不被 OriendDB 接受

你能帮帮我吗？ 谢谢。

【问题讨论】：

您的后端需要允许 CORS。

我没有bakend，只有前端（角度）直接在localhost中调用orientdb。我试试看。

解决方法是通过运行在命令下方打开 chrome 并尝试访问 chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

我已经添加了答案，如果觉得有帮助请接受，以便其他人从中受益

【参考方案1】：

在 OrientDB CORS 中默认不启用，您尝试实现的方式没有帮助。

在config/orientdb-server-config.xml中添加这个条目

<parameter name="network.http.additionalResponseHeaders" value="Access-Control-Allow-Origin: * ;Access-Control-Allow-Credentials: true;Access-Control-Allow-Headers: Content-Type;Access-Control-Allow-Methods: POST, GET, DELETE, HEAD, OPTIONS, PATCH, CONNECT, TRACE " />

上面

<parameter value="utf-8" name="network.http.charset"/>

在冒号;之后不要使用空格也很重要

【讨论】：

好的，我已经删除了客户端应用程序角度中的所有 ACCESS-CONTROL-ALLOW 设置的标题，现在可以了。谢谢