API 由于 CORS 策略，从 webapp 到 ESP8266 的请求失败

Question

Web-application（Angular，部署到 IIS）需要通过 API 与某些物联网进行交互。基于 ESP8266 的物联网和 ESP8266WebServer 库下的 API 运行。对于后端级别的每个请求，我发回 CORS header

 server.on(F("/settings"), HTTP_GET, getSettings);
 server.on(F("/settings"), HTTP_POST, updateSettings);
 server.on(F("/settings"), HTTP_OPTIONS, sendCORS);

 ....
 void getSettings()
    {
        server.sendHeader("Access-Control-Allow-Origin", "*", true);
        .....
    }

 void sendCORS()
    {
      server.sendHeader("Access-Control-Allow-Origin", "*", true);
      server.send(200);
    }

所以，我的下一个问题是：pre-flight 请求（选项）完全成功，return 状态 200 和必要的 header，但在同一个下一个 GET 请求中失败，原因是：

Access to XMLHttpRequest at 'http://192.168.1.100/settings' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field cors is not allowed by Access-Control-Allow-Headers in preflight response.

前端服务：

  getSettings(): Observable<any> {
    return this.requestBuilder.setApiUrl(environment.kitchenLedApi +'/settings')
      .get();
  }
 
  //builder
@Injectable()
export class RequestBuilderService {
  private url = '';
  private defaultHeaders = new HttpHeaders({
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Cors': 'Access-Control-Allow-Origin'
  });

  constructor(private readonly httpClient: HttpClient) { }

  public setApiUrl(url: string) {
    this.url = url;
    return this;
  }

  public get<T>(params?: { [param: string]: string | string[] }): Observable<T> {
    return this.httpClient
      .get<T>(this.url, {
        headers: this.defaultHeaders,
        params: params
      });
  }
}

你能帮忙解决这个问题吗？

Answer 1

从浏览器给您的错误中读取，您在预检请求后发出的请求包含 header（名为 Cors），但未在 Access-Control-Allow-Headers header 服务器对预检请求的响应中的值。

如果您出于某些特定原因要将自定义 header 发送到服务器，则应使用 Access-Control-Request-Headers header 公布这些内容。服务器随后应检查此值列表并发回 Access-Control-Allow-Headers header 允许的值。如果不匹配，浏览器将不会进行后续请求。也就是说，我认为不需要客户端将任何 CORS 相关的 header 手动发送到服务器。这应该由浏览器和服务器专门处理。因此，也许只需从您在服务中附加的默认 header 中删除 Cors header。

API 由于 CORS 策略，从 webapp 到 ESP8266 的请求失败

API request from webapp to ESP8266 failed due CORS policy

esp8266

angular