Ad

Axios, Fetch() Setting Request Headers Into Access-Control-Request-Headers Instead Of Separate Headers

- 1 answer

I am trying to make a GET request with some custom headers from a react application.

This is the code for the axios interceptor:

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);
      }
    );
  }

These are the response headers for the preflight request:

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

These are the request headers for the preflight request:

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

The headers for the actual request after the preflight one are the same. So Access-Control-Request-Headers: _captcha,_exp,_sgn instead of custom request headers.

Thinking it was an axios configuration issue I made the same request using fetch:

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

The result is the same.

Is this an issue with the browser-server communication? If so are there some things missing from the response headers?

Doing the same request with postman works.

Ad

Answer

The response headers for the preflight as shown in the question indicate the server’s not sending back the Access-Control-Allow-Methods response header.

For the browser to consider the preflight a success, it needs the server response to include both the Access-Control-Allow-Headers and Access-Control-Allow-Methods response headers.

Ad
source: stackoverflow.com
Ad