vue 设置请求头部 前端老白
Vue.js 是一个流行的 JavaScript 框架，用于构建动态的单页应用。在使用 Vue.js 进行开发时，网络请求是必不可少的。请求 HTTP 接口时，我们有时需要设置请求头部，以指定请求方式、携带 Token 等信息。这篇文章将详细介绍在 Vue.js 中如何设置请求头部。
Vue 中如何发起请求
// GET 请求
axios.get('/api/getUser')
.then(response =>{
console.log(response.data)
})
.catch(error =>{
console.log(error)
})
// POST 请求
axios.post('/api/login', {
username: 'myname',
password: 'mypassword'
})
.then(response =>{
console.log(response.data)
})
.catch(error =>{
console.log(error)
})Vue.js 使用 Axios 发起网络请求的 API，使用方法类似 jQuery 的 Ajax 函数库。我们可以使用 GET、POST、PUT、DELETE 等方法发起请求，也可以设置请求参数、请求头等信息。
设置全局请求头部
// 在 main.js 中设置全局请求头部
import axios from 'axios'
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
new Vue({
// ...
})将全局请求头部设置在 main.js 文件中，当应用程序启动时即会设置该请求头。我们可以通过 headers 属性来设置任意的请求头部，如 Authorization、Content-Type 等。在设置时需要注意，在 header 名称前加上 'common'。
设置局部请求头部
axios.get('/api/getUser', {
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/json'
}
})在发起局部请求时，我们可以将请求头部单独设置在 headers 属性中。这种方式只会在当前请求中生效，不会影响全局请求。
动态设置请求头部
const config = {
headers: {
'Authorization': 'Bearer ' + token
}
}
axios.get('/api/getUser', config)有时我们需要根据用户信息来动态设置请求头部，比如在用户登录后设置 Token。此时，我们可以将请求头部设置在一个对象中，然后将该对象作为参数传递给 API，即可在请求时动态设置请求头部。
总结
要设置网络请求的请求头部，在 Vue.js 应用中使用 Axios 库是非常方便的选择。我们可以通过设置全局、局部或动态请求头部的方式来满足不同的需求。
