如何正确设置Axios默认请求头

Question

我正在使用 reactjs 进行我的项目，但是我遇到了一个问题，在 config.js 文件中，我设置了全局 axios 配置，设置了 axios 请求的默认 header，但是当我发起 axios 请求时，它并没有发送这些 headers。

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;

登录.js

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);
            });

- Zayn

---

请查看此处：https://dev59.com/gLjna4cB1Zd3GeqP70pt#59484768 - Babak Yaghoobi

Answer 1

您可以使用axios拦截器完成此任务。

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);
  }
);

- SuleymanSah

---

请提供在其他类中使用实例调用 API 的方式，谢谢。 - famfamfam

这样将我的令牌保存在 localStorage 里安全吗？ - The_elevator

Answer 2

我需要在实例中创建头部对象结构以使全局头部覆盖生效：

下面的代码片段不起作用（但不会引发任何错误），在使用实例时将使用全局头部：

// 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();
  });
});

- haMzox

Answer 3

你可以默认添加axios标头令牌。只需按照2个步骤进行操作

# 步骤 - #1. 创建axios实例 -

const API_BASE_URL = "http://127.0.0.1:8000/api";

export const axiosPrivate = axios.create({
        baseURL: API_BASE_URL,
        timeout: 60000
});

#步骤 - #2. 在发送 API 请求之前设置默认报头

axiosPrivate.interceptors.request.use((request) => {
    // Do something before request is sent
    request.headers = {
        'Authorization': 'Bearer ' + localStorage.getItem('token'),
    };
    return request;
}, (error) => Promise.reject(error));

- Sheraz Howlader