"Access-Control-Allow-Origin" VSCode 调试控制台上的错误，但 Chrome DevTools 的网络选项卡上的 200OK 代码

Question

在 Angular 7 项目中，使用 HttpClient，我在单击按钮处理程序上有以下简单的代码行：

    this.http
      .get('http://localhost:30123/api/identity/name/' + this.name)
      .subscribe((answer: Identity[]) => {
        this.identities = answer;  // debug does not get here...
      });

在 VSCode:

的控制台调试选项卡上抛出此错误

Access to XMLHttpRequest at 'https://dihgldata.ingeniusds.cat/api/identitat/nom/montilla' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
[http://localhost:4200/] core.js:15724 {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https://dihgldata.ingeniusds.cat/api/identitat/nom…", ok: false, …}

但是...

我正在使用三种不同的工具来测试相同的 URL 并从 api 获得正确的响应。

第一名：邮递员

(嗯，你知道的：headers, CONTENT-TYPE,...发送时是不同的从这个实用程序比从 chrome)

其二：VS Code Extension Rest Client.

（根据 Postman，这些实用程序可用于测试 API，但对解决客户端代码错误没有帮助）

第三：ChromeDevTools.

这是我的大事。我转到 Chrome DevTools 上的网络选项卡，我可以看到 API 的响应，就在它被我的代码处理之前，并且有一个 OK-200 状态的完整响应。

Chrome DevTools 上的控制台选项卡没有错误。

使用带有 Chrome 扩展跟踪的 VS Code 集成调试器永远不会到达将答案分配给局部变量的行，错误显示在 VSCode 调试控制台中，没有其他线索。

编辑

在 Chrome 地址栏上尝试了与 Angular HttpClient 相同的 URL 并且正确显示了来自相同 API 的响应。

Answer 1

当您向 http://localhost:30123/ from any another url it will be blocked by CORS(Cross-Origin Resource Sharing) politics of http://localhost:30123/ 请求时。

您必须允许来自任何 url 或仅来自 http://localhost:4200/ 的 CORS。

在 Java 中，您可以使用 CORS 过滤器。 https://howtodoinjava.com/servlets/java-cors-filter-example/

"Access-Control-Allow-Origin" VSCode 调试控制台上的错误，但 Chrome DevTools 的网络选项卡上的 200OK 代码

"Access-Control-Allow-Origin" error on VSCode Debug Console but 200OK code at network tab at Chrome DevTools

angular

angular-httpclient