[FIXED] How to change 'Sec-Fetch-Dest' , 'Sec-Fetch-Mode' , 'Sec-Fetch-Site' and 'Sec-Fetch-User' value with Axios?

Issue

I am trying to send a request through an axios instance in vue and I do not know how can I set a certain value for 'Sec-Fetch-Dest' , 'Sec-Fetch-Mode' , 'Sec-Fetch-Site' and 'Sec-Fetch-User'.

There is no information in axios documentation about these headers and it seems they are not editable.

I tried to customize and edit default config.headers values (for example replace 'cross-site' with 'none' for 'Sec-Fetch-Site' header) but it keeps sending the default values.

Here is an example of my request code in vue:

axios.get('http://localhost:4433/some-endpoint/', {
                withCredentials: true, // if I set this to false nothing changes
                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)})

but sending request's headers will not change at all:

Thanks in advance ! :)

Solution

Unfortunately, these are secure headers, they can't be overridden by JS.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Fetch-Dest

Answered By - Pierre-Luc Paour

Answer Checked By - Pedro (PHPFixing Volunteer)