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 ! :)

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 ! :)

• javascript
• vue.js
• axios
• http-headers
• httprequest

3 Answers 3

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

I know one way to change Sec-Fetch-Mode. Try the method below

'Sec-Fetch-Mode': "navigate",

->

fetch(..., {
mode: 'no-cors',
})

result => Sec-Fetch-Mode: no-cors

For anybody that thought that 'fetch' can magically solve their issue, IT CAN NOT.

Even though you will be able to execute the request and will be able to clearly see the response in your browsers developer console, you won't be able to access it through the normal fetch methods like blob() or text() for example.

You can find a more detailed explanation here