“ http：// localhost：4200”已被CORS策略阻止：所请求的资源上没有“ Access-Control-Allow-Origin”标头

Question

我目前正在使用以下版本的Angular JS

Angular CLI：8.3.20 节点：12.7.0 操作系统：win32 x64

我只是试图通过Angular JS来访问REST endpont（基于Java Spring），并且在浏览器控制台上返回了以下错误消息：

错误消息：

  

“从来源“ http://localhost:4200”对“ http：//：8081 / api / products？productId = 7e1308ba2b9af”处的XMLHttpRequest的访问已被CORS策略阻止：无“ Access-Control-Allow-Origin”标头出现在所请求的资源上。”

我只是尝试在app.component.ts文件中添加HttpClient，如下所示，并尝试点击以下服务：

   import { Component, OnInit } from '@angular/core';
   import {HttpClient, HttpHeaders} from '@angular/common/http'

   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css']
   })
  export class AppComponent implements OnInit {
       title = 'myWebApplications';
       results = '';

  constructor(private http:HttpClient)
  {

  }

  ngOnInit():void{
    this.http.head.arguments();

    this.http.get('http://<ip address>:8081/api/products?productId=7e1308ba2b9af').subscribe(data => 
   { 

      console.log(data);
    });
  }

}

当我尝试在chrome浏览器中点击上述Endpoint（GET）时，它返回了有效的响应。但不确定为什么它无法通过angular.js返回任何响应。

我试图替换一些虚拟端点，并尝试测试上述代码，但它按预期工作。

使用下面的端点检查上面的代码：

http://dummy.restapiexample.com/api/v1/employees

已更新：

我正在更新我的最新发现：

我刚刚在本地部署了Spring boot REST客户端，并在localhost：8081中运行它，然后在angular JS中将主机名更改为localhost：8081。并刷新页面。

1. 观察到REST端点被Angular JS击中，并在spring boot输出控制台中获得了正确的响应，如下所示：

但是在浏览器控制台中仍然看到相同的错误消息。