Axios에서 헤더와 옵션을 설정하는 방법은 무엇입니까?


159

Axios를 사용하여 다음과 같은 HTTP 게시물을 수행합니다.

import axios from 'axios'
params = {'HTTP_CONTENT_LANGUAGE': self.language}
headers = {'header1': value}
axios.post(url, params, headers)

이 올바른지? 아니면 내가해야합니까 :

axios.post(url, params: params, headers: headers)

3
왜 틀린 답을 받아들 였는지 궁금합니다!
Sirwan Afifi

@SirwanAfifi이 질문에 대한 답변이 없습니다.
Tessaracter

2
@Tessaracter 2019 년 5 월 13 일에 -78의 점수로 승인 된 답변이있었습니다. 그 이후로 처리되었습니다.
jkmartindale

@jkmartindale 흥미로운
Tessaracter

답변:


264

이를 수행하는 몇 가지 방법이 있습니다.

  • 단일 요청의 경우 :

    let config = {
      headers: {
        header1: value,
      }
    }
    
    let data = {
      'HTTP_CONTENT_LANGUAGE': self.language
    }
    
    axios.post(URL, data, config).then(...)
  • 기본 전역 구성 설정 :

    axios.defaults.headers.post['header1'] = 'value' // for POST requests
    axios.defaults.headers.common['header1'] = 'value' // for all requests
  • Axios 인스턴스에서 기본값으로 설정하는 경우 :

    let instance = axios.create({
      headers: {
        post: {        // can be common or any other method
          header1: 'value1'
        }
      }
    })
    
    //- or after instance has been created
    instance.defaults.headers.post['header1'] = 'value'
    
    //- or before a request is made
    // using Interceptors
    instance.interceptors.request.use(config => {
      config.headers.post['header1'] = 'value';
      return config;
    });

1
axios여기 에서 관련 질문을 보 시겠습니까? : stackoverflow.com/questions/59470085/…
Istiaque Ahmed

141

헤더를 사용하여 get 요청을 보낼 수 있습니다 (예 : jwt를 사용한 인증).

axios.get('https://example.com/getSomething', {
 headers: {
   Authorization: 'Bearer ' + token //the token is a variable which holds the token
 }
})

또한 게시물 요청을 보낼 수 있습니다.

axios.post('https://example.com/postSomething', {
 email: varEmail, //varEmail is a variable which holds the email
 password: varPassword
},
{
  headers: {
    Authorization: 'Bearer ' + varToken
  }
})

내 방식은 다음과 같이 요청을 설정하는 것입니다.

 axios({
  method: 'post', //you can set what request you want to be
  url: 'https://example.com/request',
  data: {id: varID},
  headers: {
    Authorization: 'Bearer ' + varToken
  }
})

1
두 번째 게시물 요청은 특정 헤더를 제공하지 않습니다. 전체 예제를 위해 편집 할 수 있습니까?
Striped

datainterceptors.request =>에서 사용하면 사용 중인 특정 호출에서 실제 신체 부분을 무시합니다. 그런 경우에는 사용하지 마십시오.
Anupam Maurya

이 표준 'Authorization :'Bearer '+ token'을 따라야합니까 아니면 Auth : token과 같은 것을 할 수 있습니까? 나는 auth0 api를 사용하지 않고 노드에서 내 자신의 일을하고 있습니다. 바보 같은 질문이 jwt에 대한 새로운 질문과 일반적으로 보안에 관한 것이라면
Wiliam Cardoso

24

다음과 같이 구성 객체를 축에 전달할 수 있습니다.

axios({
  method: 'post',
  url: '....',
  params: {'HTTP_CONTENT_LANGUAGE': self.language},
  headers: {'header1': value}
})

16

다음은 헤더와 responseType이있는 간단한 구성 예입니다.

var config = {
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  responseType: 'blob'
};

axios.post('http://YOUR_URL', this.data, config)
  .then((response) => {
  console.log(response.data);
});

Content-Type은 'application / x-www-form-urlencoded'또는 'application / json'일 수 있으며 'application / json; charset = utf-8'도 작동 할 수 있습니다

responseType은 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'일 수 있습니다.

이 예에서 this.data는 보내려는 데이터입니다. 값 또는 배열 일 수 있습니다. (개체를 보내려면 직렬화해야 할 것입니다)


config 키워드없이 헤더를 설정하는 것의 차이점을 설명해 주시겠습니까?
버블 코드

1
구성 변수를 사용하면 더 좋고 읽기 쉬운 코드가 생성됩니다. 다른 @ bubble-cord
gtamborero


10

기본 헤더를 초기화 할 수 있습니다 axios.defaults.headers

 axios.defaults.headers = {
        'Content-Type': 'application/json',
        Authorization: 'myspecialpassword'
    }

   axios.post('https://myapi.com', { data: "hello world" })
        .then(response => {
            console.log('Response', response.data)
        })
        .catch(e => {
            console.log('Error: ', e.response.data)
        })

9

매개 변수와 헤더로 요청을 받으려면

var params = {
  paramName1: paramValue1,
  paramName2: paramValue2
}

var headers = {
  headerName1: headerValue1,
  headerName2: headerValue2
}

 Axios.get(url, {params, headers} ).then(res =>{
  console.log(res.data.representation);
});


2

이 코드를 사용해보십시오

예제 코드에서 axios get rest API를 사용하십시오.

장착

  mounted(){
    var config = {
    headers: { 
      'x-rapidapi-host': 'covid-19-coronavirus-statistics.p.rapidapi.com',
      'x-rapidapi-key': '5156f83861mshd5c5731412d4c5fp18132ejsn8ae65e661a54' 
      }
   };
   axios.get('https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/stats? 
    country=Thailand',  config)
    .then((response) => {
    console.log(response.data);
  });
}

희망은 도움입니다.


2

게시물 요청에서이 문제에 직면했습니다 . axios 헤더에서 이와 같이 변경되었습니다. 잘 작동합니다.

axios.post('http://localhost/M-Experience/resources/GETrends.php',
      {
        firstName: this.name
      },
      {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      });

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.