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

인용구

인용구

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...'
         }