6

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:

enter image description here

Thanks in advance ! :)

ali forooghie
  • 143
  • 2
  • 2
  • 8

3 Answers3

6

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

Pierre-Luc Paour
  • 1,725
  • 17
  • 21
3

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

yun
  • 94
  • 7
-1

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

Larzan
  • 9,389
  • 3
  • 42
  • 41