Axios，fetch（）將請求標頭設置為Access-Control-Request-Headers，而不是單獨的標頭

Question

我正在嘗試使用React應用程序的一些自定義標頭發出GET請求。

這是axios攔截器的代碼：

addCaptchaHeaders(captcha, sgn, exp) {
    // remove the old captcha headers
    if (this.captchaHeadersInterceptor !== undefined) {
      this.removeCaptchaHeader();
    }
    // Sign new captcha headers
    this.captchaHeadersInterceptor = this.httpClient.interceptors.request.use(
      config => {
        // Add headers here
        config.headers.common._captcha = captcha;
        config.headers.common._sgn = sgn;
        config.headers.common._exp = exp;
        return config;
      },
      error => {
        // Do something with request error
        return Promise.reject(error);
      }
    );
  }

這些是預檢請求的響應標頭：

Access-Control-Allow-Headers: origin, content-type, accept, authorization, _captcha, _sgn, _exp
Content-Length: 0
Server: Jetty(9.3.24.v20180605)

這些是預檢請求的請求標頭：

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,sl;q=0.8
Access-Control-Request-Headers: _captcha,_exp,_sgn
Access-Control-Request-Method: GET
Connection: keep-alive
Host: localhost:8086
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.92 Safari/537.36

預檢后實際請求的標頭相同。 因此， Access-Control-Request-Headers: _captcha,_exp,_sgn而不是自定義請求標頭。

認為這是一個axios配置問題，所以我使用fetch發出了相同的請求：

fetch(
      "http://localhost:8086/podatki/parcela/search?parcela=1727&count=50&offset=0",
      {
        method: "GET",
        headers: {
          _captcha: res,
          _sgn: sgn,
          _exp: exp
        }
      }
    );

結果是一樣的。

瀏覽器與服務器之間的通訊是否有問題？ 如果是這樣，響應頭中是否缺少某些內容？

對郵遞員執行相同的請求。

Answer 1

您在哪里檢查標題？ Chrome開發人員工具確實確實會這樣顯示它們，但只有在請求加載失敗時（由於缺少“ Access-Control-Allow-Origin”標頭-在這種情況下，即使服務器返回200也會失敗）或其他任何原因）

Answer 2

問題中所示的預檢響應頭表示服務器未發送回Access-Control-Allow-Methods響應頭。

為了使瀏覽器認為預檢成功，它需要服務器響應包括Access-Control-Allow-Headers和Access-Control-Allow-Methods響應標頭。