Axios，fetch() 设置请求 headers 到 Access-Control-Request-Headers 而不是单独的 headers

Question

我正在尝试从 React 应用程序中使用一些自定义 headers 发出 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);
      }
    );
  }

这些是预检请求的响应 headers：

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

这些是预检请求 headers：

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

预检后的实际请求headers是一样的。所以 Access-Control-Request-Headers: _captcha,_exp,_sgn 而不是自定义请求 headers.

以为是 axios 配置问题，我使用 fetch 发出了相同的请求：

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

结果是一样的

这是 browser-server 通信的问题吗？如果是这样，响应中是否缺少某些内容 headers?

用邮递员做同样的请求。

Answer 1

您在哪里查看 header？ Chrome 开发工具确实像那样显示它们，但只有当请求加载失败时（由于缺少 'Access-Control-Allow-Origin' header - 在这种情况下，即使服务器 returns 200 - 或任何其他原因）

Answer 2

问题中显示的预检响应 header 表示服务器未发回 Access-Control-Allow-Methods 响应 header。

为了让浏览器认为预检成功，它需要服务器响应同时包含 Access-Control-Allow-Headers 和 Access-Control-Allow-Methods 响应 headers.

Axios，fetch() 设置请求 headers 到 Access-Control-Request-Headers 而不是单独的 headers

Axios, fetch() setting request headers into Access-Control-Request-Headers instead of separate headers

javascript

http

http-headers

cors

fetch-api