如何使用 Axios 更改 'Sec-Fetch-Dest' 、 'Sec-Fetch-Mode' 、 'Sec-Fetch-Site' 和 'Sec-Fetch-User' 值？答案

【问题标题】：How to change 'Sec-Fetch-Dest' , 'Sec-Fetch-Mode' , 'Sec-Fetch-Site' and 'Sec-Fetch-User' value with Axios?如何使用 Axios 更改 'Sec-Fetch-Dest' 、 'Sec-Fetch-Mode' 、 'Sec-Fetch-Site' 和 'Sec-Fetch-User' 值？
【发布时间】：2022-07-21 20:15:44
【问题描述】：

我正在尝试通过 vue 中的 axios 实例发送请求，但我不知道如何为 'Sec-Fetch-Dest' 、 'Sec-Fetch-Mode' 、 'Sec-Fetch- 设置某个值站点”和“Sec-Fetch-User”。

axios documentation 中没有关于这些标题的信息，而且它们似乎不可编辑。

我尝试自定义和编辑默认 config.headers 值（例如，将 'cross-site' 替换为 'none' 以获得 'Sec-Fetch-Site' 标头），但它一直在发送默认值。

这是我在 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)})

但发送请求的标头根本不会改变：

提前致谢！ :)

【问题讨论】：

标签： javascript vue.js axios http-headers httprequest

【解决方案1】：

不幸的是，这些是安全的标头，它们不能被 JS 覆盖。

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

【讨论】：