Angular 5：预检响应具有无效的 HTTP 状态代码 403

当我向服务器发送 POST 请求时，出现错误：

Failed to load http://localhost:8181/test: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

后端是用Java Spring编写的。 我创建测试的方法：

createTest() {
    const body = JSON.stringify({
      'description': 'grtogjoritjhio',
      'passingTime': 30,
      'title': 'hoijyhoit'
    });

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

    return this._http.post(`${this._config.API_URLS.test}`, body, httpOptions)
      .subscribe(res => {
        console.log(res );
      }, error => {
        console.log(error);
    });
  }

Get 方法有效，但 Post 无效。他们都在 Swagger 和 Postman 工作。我多次更改 POST 方法。我的代码中的标头不起作用，但我通过将它们扩展到 Google Chrome 解决了问题。只有一个错误：

Response for preflight has invalid HTTP status code 403.

在我看来，这不是 Angular 的问题。请告诉我我或我的朋友（编写后端的人）如何解决这个问题。

问题 ：

对于任何跨源 POST 请求，浏览器将首先尝试执行 OPTIONS 调用，当且仅当该调用成功时，它才会执行真正的 POST 调用。但在你的情况下， OPTIONS 调用失败，因为没有'Access-Control-Allow-Origin'响应头。因此实际的调用将不会完成。

解决方案 ：

因此，要实现此功能，您需要在服务器端添加 CORS 配置，以设置跨源请求所需的适当标头，例如：

• response.setHeader("Access-Control-Allow-Credentials", "true");
• response.setHeader("Access-Control-Allow-Headers", "content-type, if-none-match");
• response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS");
• response.setHeader("Access-Control-Allow-Origin", "*");
• response.setHeader("Access-Control-Max-Age", "3600");