[json] axios POST 요청으로 헤더 전달

다음과 같은 npm 패키지 문서에서 권장하는대로 axios POST 요청을 작성했습니다.

var data = {
    'key1': 'val1',
    'key2': 'val2'
}
axios.post(Helper.getUserAPI(), data)
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

그리고 작동하지만 이제 헤더를 허용하도록 백엔드 API를 수정했습니다.

콘텐츠 유형 : ‘application / json’

인증 : ‘JWT fefege …’

이제이 요청은 Postman에서 잘 작동하지만 axios 호출을 작성할 때이 링크를 따라 가며 제대로 작동하지 않습니다.

지속적으로 400 BAD Request오류 가 발생합니다.

수정 된 요청은 다음과 같습니다.

axios.post(Helper.getUserAPI(), {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'JWT fefege...'
    },
    data
})
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

어떤 도움이라도 대단히 감사합니다.

답변

axios를 사용할 때 사용자 정의 헤더를 전달하려면 헤더가 포함 된 객체를 마지막 인수로 제공하십시오.

axios 요청을 다음과 같이 수정합니다.

const headers = {
  'Content-Type': 'application/json',
  'Authorization': 'JWT fefege...'
}

axios.post(Helper.getUserAPI(), data, {
    headers: headers
  })
  .then((response) => {
    dispatch({
      type: FOUND_USER,
      data: response.data[0]
    })
  })
  .catch((error) => {
    dispatch({
      type: ERROR_FINDING_USER
    })
  })

답변

다음은 사용자 지정 헤더가있는 axios.post 요청의 전체 예입니다.

var postData = {
  email: "test@test.com",
  password: "password"
};

let axiosConfig = {
  headers: {
      'Content-Type': 'application/json;charset=UTF-8',
      "Access-Control-Allow-Origin": "*",
  }
};

axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
.then((res) => {
  console.log("RESPONSE RECEIVED: ", res);
})
.catch((err) => {
  console.log("AXIOS ERROR: ", err);
})

스 니펫 확장

답변

이것은 도움이 될 수 있습니다.

const data = {
  email: "me@me.com",
  username: "me"
};

const options = {
  headers: {
      'Content-Type': 'application/json',
  }
};

axios.post('http://path', data, options)
 .then((res) => {
   console.log("RESPONSE ==== : ", res);
 })
 .catch((err) => {
   console.log("ERROR: ====", err);
 })

스 니펫 확장

참고 : 400 이상의 모든 상태 코드는 Axios catch 블록에 포함됩니다. 또한 헤더는 Axios의 게시 방법에 대해 선택 사항입니다.

인용구

인용구

답변

Shubham 대답은 나를 위해 작동하지 않았습니다.

axios 라이브러리를 사용하고 사용자 정의 헤더를 전달하려면 키 이름이 “headers”인 객체로 헤더를 구성해야합니다. 헤더 키는 객체를 포함해야합니다. 여기서는 Content-Type 및 Authorization입니다.

아래 예는 잘 작동합니다.

    var headers = {
        'Content-Type': 'application/json',
        'Authorization': 'JWT fefege...'
    }
    axios.post(Helper.getUserAPI(), data, {"headers" : headers})

        .then((response) => {
            dispatch({type: FOUND_USER, data: response.data[0]})
        })
        .catch((error) => {
            dispatch({type: ERROR_FINDING_USER})
        })

답변

인터셉터를 사용하여 헤더를 전달할 수도 있습니다.

많은 코드를 절약 할 수 있습니다.

axios.interceptors.request.use(config => {
  if (config.method === 'POST' || config.method === 'PATCH' || config.method === 'PUT')
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

  const accessToken = AuthService.getAccessToken();
  if (accessToken) config.headers.Authorization = 'Bearer ' + accessToken;

  return config;
});

답변

또는 생성시 읽을 수없는 vuejs 프로토 타입의 일부 속성을 사용하는 경우 헤더를 정의하고 다음과 같이 작성할 수도 있습니다.

storePropertyMaxSpeed(){
                axios.post('api/property', {
                    "property_name" : 'max_speed',
                    "property_amount" : this.newPropertyMaxSpeed
                    },
                    {headers :  {'Content-Type': 'application/json',
                                'Authorization': 'Bearer ' + this.$gate.token()}})
                  .then(() => { //this below peace of code isn't important 
                    Event.$emit('dbPropertyChanged');

                    $('#addPropertyMaxSpeedModal').modal('hide');

                    Swal.fire({
                        position: 'center',
                        type: 'success',
                        title: 'Nova brzina unešena u bazu',
                        showConfirmButton: false,
                        timer: 1500
                        })
                })
                .catch(() => {
                     Swal.fire("Neuspješno!", "Nešto je pošlo do đavola", "warning");
                })
            }
        },

답변

Json은 큰 따옴표로 형식을 지정해야합니다.

처럼:

headers: {
                "Content-Type": "application/Jason",
                "Authorization": "JWT fefege..."
            }

뿐만 아니라:

headers: {
                'Content-Type': 'application/json',
                'Authorization': 'JWT fefege...'
         }