I'm having trouble figuring out how to set specific values for the 'Sec-Fetch-Dest', 'Sec-Fetch-Mode', 'Sec-Fetch-Site', and 'Sec-Fetch-User' headers when making a request through an axios instance in Vue.
Unfortunately, the axios documentation doesn't provide information on how to customize these headers, and it seems they cannot be modified directly.
I attempted to modify the default config.headers values, such as changing 'cross-site' to 'none' for the 'Sec-Fetch-Site' header, but the request continues to send the default values.
Below is an example of the request code in my Vue application:
axios.get('http://localhost:4433/some-endpoint/', {
withCredentials: true,
headers: {
'Sec-Fetch-Dest': 'document',
'Sec-Fetch-Mode': "navigate",
'Sec-Fetch-Site': 'none',
'Sec-Fetch-User': '?1'
}
})
.then(res => {console.log('response', res)})
.catch(err => {console.log('error', err)})
Despite my efforts, the request headers remain unchanged:
https://i.sstatic.net/EoSXE.png
Thank you for your help! :)