在我的react应用程序中,我使用axios来执行REST api请求。

但是它无法随请求一起发送授权标头。

这是我的代码:

tokenPayload() {
  let config = {
    headers: {
      'Authorization': 'Bearer ' + validToken()
    }
  }
  Axios.post( 
      'http://localhost:8000/api/v1/get_token_payloads',
      config
    )
    .then( ( response ) => {
      console.log( response )
    } )
    .catch()
}

这里,validToken()方法将简单地从浏览器存储中返回令牌。

所有的请求都有一个500错误响应

无法从请求解析令牌

从后端。

如何发送授权头与每个请求?你会推荐react的其他模块吗?


当前回答

如果你发送一个带有空数据的post请求,请记住始终将第二个参数设置为空对象或空字符串,如下例所示。例句:axios。Post ('your-end-point-url-here', ", config)

如果你不设置它,axios会假设你传递的第二个参数是一个formData

const config = {
      headers: { Authorization: `Bearer ${storage.getToken()}` }
    };
    axios
      .post('http://localhost:8000/api/v1/get_token_payloads', {}, config)
      .then(({ data: isData }) => {
        console.log(isData);
      })
      .catch(error => {
        console.log(error);
      });

其他回答

Axios本身带有两个有用的“方法”——拦截器,它们只是请求和响应之间的中间件。如果每个请求都要发送令牌。使用interceptor.request。

我做了一个包来帮助你:

$ npm i axios-es6-class

现在可以使用axios作为类了

export class UserApi extends Api {
    constructor (config) {
        super(config);

        // this middleware is been called right before the http request is made.
        this.interceptors.request.use(param => {
            return {
                ...param,
                defaults: {
                    headers: {
                        ...param.headers,
                        "Authorization": `Bearer ${this.getToken()}`
                    },
                }
            }
        });

      this.login = this.login.bind(this);
      this.getSome = this.getSome.bind(this);
   }

   login (credentials) {
      return this.post("/end-point", {...credentials})
      .then(response => this.setToken(response.data))
      .catch(this.error);
   }


   getSome () {
      return this.get("/end-point")
      .then(this.success)
      .catch(this.error);
   }
}

我的意思是中间件的实现取决于您,或者如果您喜欢创建自己的axios-es6-class https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a 这是它来自的中帖

这是有效的,我只需要在我的app.js中设置令牌一次:

axios.defaults.headers.common = {
    'Authorization': 'Bearer ' + token
};

然后,我可以在组件中发出请求,而无需再次设置标头。

“axios”: “^0.19.0”,

你必须提到post请求的第二个参数体,即使它是空的,试试这个:

tokenPayload() {
  let config = {
    headers: {
      'Authorization': 'Bearer ' + validToken()
    }
  }
  Axios.post( 
      'http://localhost:8000/api/v1/get_token_payloads',
      // empty body
      {},
      config
    )
    .then( (response) => {
      console.log(response)
    } )
    .catch()
}

有很多好的解决方案,但我用这个

let token=localStorage.getItem("token");

var myAxios=axios.create({
  baseURL: 'https://localhost:5001',
  timeout: 700,
  headers: {'Authorization': `bearer ${token}`}
});

export default myAxios;

然后我导入myaxios到我的文件

myAxios.get("sth")

下面是axios中设置授权令牌的独特方法。为每个axios调用设置配置并不是一个好主意,您可以通过以下方式更改默认的授权令牌:

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:1010/'
axios.defaults.headers.common = {'Authorization': `bearer ${token}`}
export default axios;

一些API要求承载被写成承载,所以你可以这样做:

axios.defaults.headers.common = {'Authorization': `Bearer ${token}`}

现在您不需要为每个API调用设置配置。现在,授权令牌被设置为每个axios调用。