Axios, Fetch() Setting Request Headers Into Access-Control-Request-Headers Instead Of Separate Headers
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.
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.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM