添加@CrossOrigin注释后仍然出现CORS错误

Question

我正在用角靴和弹簧靴构建一个简单的Web应用程序，并且我对这两个框架都是全新的。我正在尝试使用angular HttpClient发出http GET请求，但遇到了这样的错误：

Access to XMLHttpRequest at 
'http://127.0.0.1:8080/api/employees/all' from origin 
'http://127.0.0.1:4200' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

我正在使用这样的角度代码：

  this.http.get('http://127.0.0.1:8080/api/employees/all')
  .subscribe(data => {
    console.log(JSON.stringify(data));
  });

但是当我开始遇到此错误时，将其更改为：

  private httpOptions = {
headers: new HttpHeaders({
  'Content-Type': 'application/json',
})
};

this.httpOptions.headers.set('Authorization', 'Basic admin:admin123');
this.httpOptions.headers.set('Access-Control-Allow-Origin', '*');
this.httpOptions.headers.set('Access-Control-Allow-Method', 'GET, PUT, POST, DELETE, OPTIONS');
this.httpOptions.headers.set('Access-Control-Allow-Headers', 'Origin, Content-Type, X-Auth-Token');
this.http.get('http://127.0.0.1:8080/api/employees/all')
  .subscribe(data => {
    console.log(JSON.stringify(data));
  });

但是这没有效果。我发现了一些存在类似问题的帖子，人们通过在弹簧java代码中添加@CrossOrigin批注来解决了他们的问题，因此我也尝试了此操作：

@CrossOrigin
@GetMapping(path = "/employees/all") // class @RequestMapping is "/api"
public @ResponseBody Iterable<Employee> getAllEmployees() {
    System.out.println("endpoint reached");
    return employeeRepository.findAll();
}

但是这也不起作用。我不断收到相同的错误。我认为我不完全了解问题的根源。这是服务器端问题还是客户端问题？另外我该如何解决？

非常感谢您为解决此问题提供的帮助。预先谢谢你。

Answer 1

这是服务器端的问题，一种简单但不安全的方法，它是将Access-control-allow-origin设置为*来检索每个API调用。如果在固定后端之前确实需要它，则可以在chrome上使用扩展名：https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=es