axios로 Bearer 토큰 보내기

axios로 Bearer 토큰 보내기

---

내 반응 앱에서 나는 axios 를 사용하여 REST API 요청을 수행하고 있습니다.

그러나 요청과 함께 Authorization 헤더 를 보낼 수 없습니다 .

내 코드는 다음과 같습니다.

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 오류 응답이 있습니다.

요청에서 토큰을 구문 분석 할 수 없습니다.

백엔드에서.

각 요청과 함께 인증 헤더를 보내는 방법은 무엇입니까? 반응이있는 다른 모듈을 추천 하시겠습니까?

---

var config = {
    headers: {'Authorization': "bearer " + token}
};

var bodyParameters = {
   key: "value"
}

Axios.post( 
  'http://localhost:8000/api/v1/get_token_payloads',
  bodyParameters,
  config
).then((response) => {
  console.log(response)
}).catch((error) => {
  console.log(error)
});

첫 번째 매개 변수는 URL입니다.
두 번째는 요청과 함께 전송되는 JSON 본문입니다.
세 번째 매개 변수는 (무엇보다도) 헤더입니다. JSON도 마찬가지입니다.

---

다음은 axios에서 인증 토큰을 설정하는 고유 한 방법입니다. 모든 axios 호출에 구성을 설정하는 것은 좋은 생각이 아니며 다음과 같은 방법으로 기본 인증 토큰을 변경할 수 있습니다.

const axios = require('axios');
axios.defaults.baseURL = 'http://localhost:1010/'
axios.defaults.headers.common = {'Authorization': `bearer ${token}`}
export default axios;

편집하다

일부 API에서는 Bearer를 Bearer로 작성해야하므로 다음을 수행 할 수 있습니다.

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

이제 모든 API 호출에 구성을 설정할 필요가 없습니다. 이제 인증 토큰이 모든 axios 호출에 설정됩니다.

---

의 두 번째 매개 변수 axios.post는 data(아님 config)입니다. config세 번째 매개 변수입니다. 자세한 내용은 https://github.com/mzabriskie/axios#axiosposturl-data-config 를 참조하십시오.

---

구성을 한 번만 만들어 어디서나 사용할 수 있습니다.

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'Authorization': 'Bearer '+token}
});

instance.get('/path')
.then(response => {
    return response.data;
})

---

Axios 인터셉터 사용 :

const service = axios.create({
  timeout: 20000 // request timeout
});

// request interceptor

service.interceptors.request.use(
  config => {
    // Do something before request is sent

    config.headers["Authorization"] = "bearer " + getToken();
    return config;
  },
  error => {
    Promise.reject(error);
  }
);

---

이 코드를 시도하도록 헤더에 토큰을 전달한 후 일부 데이터를 원한다면

const api = 'your api'; 
const token = JSON.parse(sessionStorage.getItem('data'));
const token = user.data.id; /*take only token and save in token variable*/
axios.get(api , { headers: {"Authorization" : `Bearer ${token}`} })
.then(res => {
console.log(res.data);
.catch((error) => {
  console.log(error)
});

---

이것은 작동하며 토큰을 한 번만 설정해야합니다 app.js.

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

Then I can make requests in my components without setting the header again.

"axios": "^0.19.0",

---

This is what i also faced. The token which u are passing is not correct.

Just Hardcode the token and pass, you will get the correct response. But if token is not passed in single quote '', then it will surely fail. It must be in format 'Authorization': 'Bearer YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ', where after Bearer one space must be present, also inside single quotes, this is very important.

var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ";

var headers = {
  Authorization: "Bearer " + token,
  Accept: "application/json, text/plain, */*",
  "Content-Type": "application/json"
};

IMP: The above code will work But if u post something like:

'Authorization': 'Bearer '+ YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ, it will fail

or-----the below code also will fail, i hope u understand the basic difference

var token = YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ;

var headers = {
  Authorization: "Bearer " + token,
  Accept: "application/json, text/plain, */*",
  "Content-Type": "application/json"
};

참고URL : https://stackoverflow.com/questions/40988238/sending-the-bearer-token-with-axios