如何正确设置 axios 默认标头答案

【问题标题】：How to properly set axios default headers如何正确设置 axios 默认标头
【发布时间】：2020-01-13 07:14:29
【问题描述】：

我在我的项目中使用 reactjs，但是我有一个问题，在我设置全局 axios 配置的 config.js 文件中，我正在为 axios 请求设置默认标头，但是当我发出 axios 请求时它不会发送那些请求中的标头。

config.js

import axios from 'axios';

const instance = axios.create({
    baseURL: 'URL/api'
});

export const setAuthToken = (token) => {
    if (token) {
        // Apply to every request
        instance.defaults.headers.common['Authorization'] = 'Bearer ' + token;
    } else {
        // Delete auth header
        delete instance.defaults.headers.common['Authorization'];
    }
};

export default instance;

import axios from '../../../config';
import { setAuthToken } from '../../../config';
axios
            .post('/auth/signin', {
                username: email,
                password: password
            })
            .then((res) => {
                setCurrentUser(res.data);
                setAuthToken(res.data.accessToken);
                setLoading(false);
            })
            .catch((err) => {
                console.log(err);
                setLoading(false);
                setError(true);
            });

【问题讨论】：

看这里：stackoverflow.com/questions/59484512/logout-if-token-is-expired/…

标签： reactjs http-headers axios

【解决方案1】：

你可以使用 axios interceptors 来完成这个任务。

1-) 在成功登录的内部，将检索到的令牌放入localStorage。删除 setAuthToken 行。

 .then((res) => {
                setCurrentUser(res.data);
                localStorage.setItem("token", res.data.accessToken);
                setLoading(false);
            })

2-) 将此拦截器添加到您的 axios 实例。

const instance = axios.create({
    baseURL: 'URL/api'
});

instance.interceptors.request.use(
  function(config) {
    const token = localStorage.getItem("token"); 
    if (token) {
      config.headers["Authorization"] = 'Bearer ' + token;
    }
    return config;
  },
  function(error) {
    return Promise.reject(error);
  }
);

【讨论】：

【解决方案2】：

我必须在实例中创建标头对象结构，才能使全局标头覆盖工作：

下面的代码 sn-p 不起作用（但它不会引发任何错误）；使用实例时使用全局头：

// Index.js
axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN';

// myAxios.js
const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com'
});

instance.defaults.headers.common['Authorization'] = 'AUTH_TOKEN_FROM_INSTANCE';

这确实有效，实例标头会覆盖全局默认值：

// Index.js
axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN';

// myAxios.js
const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  headers: {
    common: {
      Authorization: 'AUTH_TOKEN_FROM_INSTANCE'
    }
  }
});

在我看来，使用#create时应该默认创建这个对象结构。

================================================ ==============================

此外，如果您想取消设置标题，请不要使用delete。这是一个测试：

it('should remove default headers when config indicates', function (done) {
  var instance = axios.create();
  instance.defaults.headers.common['Content-Type'] = 'application/json';

  instance.post('/foo/bar/', {
    firstName: 'foo',
    lastName: 'bar'
  }, {
    headers: {
      'Content-Type': null
    }
  });

  getAjaxRequest().then(function (request) {
    testHeaderValue(request.requestHeaders, 'Content-Type', null);
    done();
  });
});

【讨论】：