axios设置请求头无效，采用axios请求拦截实现

axios 的运用

目录

axios 的运用

axios 请求头设置相关问题

axios 设置请求头的几种方式：（以 token 为例）

1. 全局修改源码配置项

2. 在单个请求中设置

3. 在新建的实例中设置

4. 在 axios 提供的请求拦截器中设置

axios 请求头设置相关问题

在项目实践中，使用axios设置请求头headers，结果在请求过程中请求头中并没有包含headers中设置的请求头信息，而且后台也没有接收到前台设置的请求头信息，导致数据无法进行校验，请求失败

GET 请求方式

import axios from 'axios'

const params = {}
const config = {
    headers: {
        token: 'xxx'
    }
}

axios.get('/user/info', params, config).then(res => {
    // do something
    // ...
}).catch(err => {
    console.log(err)
})

POST请求方式：

import axios from 'axios'

const loginForm = {
    username: 'xxx',
    password: 'xxx'
}
const config = {
    header = {
        "Content-Type":"application/json"
    }
}
axios.post('/user/login', loginForm, config).then(res => {
    // do something
    // ...
}).catch(err => {
    console.log(err)
})

查看请求结果时，发现请求头headers中并没有设置的headers信息，即没有token

解决axios请求无法设置请求头headers

import axios from 'axios'

axios.interceptors.request.use(
    config => {
        config.headers.token = 'xxx'
        // do something
        // ...
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

 设置请求拦截之后，每次发送请求且在返回请求数据之前都会调用这个方法对请求头进行设置

axios 设置请求头的几种方式：（以 token 为例）

1. 全局修改源码配置项

import axios from 'axios'

const config = {
    headers: {
        token: "xxx"
    }
}

axios.request(config)

2. 在单个请求中设置

import axios from 'axios'

const params = {}
const config = {
    headers: {
        token: 'xxx'
    }
}

axios.get('/user/info', params, config).then(res => {
    // do something
    // ...
})

axios.post('/user/info', params, config).then(res => {
    // do something
    // ...
})

3. 在新建的实例中设置

import axios from 'axios'

const options = {
    baseURL: 'http://xxx/api',
    timeout: 60000,
    headers: {
        token: 'xxx'
    }
}

const request = axios.create(options)

const params = {}

request.post('/user/info', params).then(res => {
    // do something
    // ...
}).catch(err => console.log(err))

request.get('/user/info', params).then(res => {
    // do something
    // ...
})

4. 在 axios 提供的请求拦截器中设置

import axios from 'axios'

axios.interceptors.request.use(
    config => {
        config.headers.token = 'xxx'
        // do something
        // ...
        return config
    }
)