Angular 9（HttpClient）如何修复CORS错误？答案

【问题标题】：Angular 9 (HttpClient) How to fix CORS error?Angular 9（HttpClient）如何修复CORS错误？
【发布时间】：2021-07-02 03:12:42
【问题描述】：

我有 POST 请求：

getLagTimestamp() {
    const headers = new HttpHeaders({
      'Access-Control-Allow-Origin': '*', 'Authorization': 'Basic YWRtaW46cGFzc3dvcmQ='
    });
    this.response = this.http.post(this.url, '{"method":"topics_lag","id":"req-id-01","jsonrpc":"2.0"}', {headers:headers})
      .subscribe((response) => {
        this.response = response;
        this.lagTimestamps = Object.setPrototypeOf(this.response, Array<LagTimestampObject>());
        console.log(this.lagTimestamps);
      });
  }

我在 Java 上有 com.sun.net.httpserver.HttpsServer 和身份验证的后端。在后端我设置了参数：

    httpExchange.getResponseHeaders().add("Content-Type", "application/json");
    httpExchange.getResponseHeaders().add("Access-Control-Allow-Origin", "*");
    httpExchange.getResponseHeaders().add("Content-Type", "application/json");
    httpExchange.getResponseHeaders().add("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, DELETE, OPTIONS");
    httpExchange.getResponseHeaders().add("Access-Control-Allow-Headers", "Origin, Content-Type, X-Auth-Token,Authorization");
    httpExchange.getResponseHeaders().add("Access-Control-Allow-Credentials", "true");

但是前端和后端之间的请求有一些问题：

从源访问“http://localhost:9099/rpc”处的 XMLHttpRequest “http://localhost:4200”已被 CORS 策略阻止：响应预检请求未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。

我尝试使用这样的前端代理：

{
  "/rpc": {
    "target": "https://localhost:9099",
    "secure": true,
    "pathRewrite": {
      "^/rpc": ""
    },
    "changeOrigin": true
  }
}

我已经尝试解决这个问题一周了，但没有任何帮助。如何解决这个问题？

谢谢

补充： 在后端更新后：

if (httpExchange.getRequestMethod().equalsIgnoreCase("OPTIONS")) {
   httpExchange.getResponseHeaders().add("Access-Control-Allow-Methods", "GET, OPTIONS");
   httpExchange.getResponseHeaders().add("Access-Control-Allow-Headers", "Content-Type,Authorization");
    httpExchange.sendResponseHeaders(200, -1);
}

我有：

【问题讨论】：

修复方法是配置 http://localhost:9099/rpc 端点以允许未经身份验证的 OPTIONS 请求。目前，它似乎希望在 CORS 预检 OPTIONS 请求中找到 Authorization 标头——但浏览器有意在预检中不发送 Authorization 标头或任何其他凭据。因此服务器响应 401 错误，因为它没有找到预期的凭据。更详细的解释见stackoverflow.com/a/45406085/441757的答案
我添加了 if (httpExchange.getRequestMethod().equalsIgnoreCase("OPTIONS")) { httpExchange.sendResponseHeaders(200, 3);但如果我使用邮递员，它就可以工作。它在浏览器中不起作用。魔术。
我试图修复它，结果是除了问题。
i.stack.imgur.com/odqoO.png 表示预检现在成功。所以提出问题的问题现在已经解决了。但是您有一个新的/不同的问题：POST 请求因 NS_ERROR_DOM_BAD_URI 而失败。由于您已经解决了预检问题，而这个新问题是一个非常不同的问题，您可能想为它发布一个新的/单独的问题。

标签： java angular cors httpclient httpserver

【解决方案1】：

您需要预检响应（OPTIONS 调用响应）返回 "Access-Control-Allow-Origin", "*".

您从您的服务器收到一个未经授权的 401 选项调用。查看允许选项调用并在此处返回标头"Access-Control-Allow-Origin", "*"。

【讨论】：

您能否更详细地描述一下如何做到这一点？
您需要确保任何 OPTIONS 请求不受您的授权过滤器的约束。让它在标题中返回 Access-Control-Allow-Origin。