>

nuxt 응용 프로그램 내에서 다음과 같은 외부 API를 호출해야합니다 (file.vue) :

<template>
  <div class="container">
    <h1>{{ post.title }}</h1>
    <pre>{{ post.body }}</pre>
    <p><nuxt-link to="/posts">Back to the list</nuxt-link></p>
  </div>
</template>
<script>
export default {
  async asyncData({ app }) {
    let { data } = await app.$axios.$get(`http://my.api.adress:8001/competition/sport/4?_format=json&limit=20&offset=0`)
    return { post: data }
  },
  head() {
    return {
      title: this.post.title
    }
  }
}
</script>

이 호출을 작동 시키려면 헤더에 트리 인수를 전달해야합니다. 누구나 nuxt의 모든 API 호출에서 작동하도록하는 방법에 대한 아이디어가 있습니까?

  • 답변 # 1

    nuxt (이미 수행 한) 용 axios 모듈을 사용하여 헤더를 설정할 수 있습니다.

    문서에서 가져옴 :

    setHeader (이름, 값, 범위 = '공통')
    이름 : 헤더 이름
    값 : 헤더 값
    범위 : 특정 유형의 요청에서만 전송합니다.

    예 :

    // Adds header: `Authorization: 123` to all requests
    this.$axios.setHeader('Authorization', '123')
    // Overrides `Authorization` header with new value
    this.$axios.setHeader('Authorization', '456')
    // Adds header: `Content-Type: application/x-www-form-urlencoded` to only 
    // post requests
        this.$axios.setHeader('Content-Type', 'application/x-www-form-urlencoded', [
          'post'
        ])
    // Removes default Content-Type header from `post` scope
    this.$axios.setHeader('Content-Type', false, ['post'])
    
    


    자세한 내용은 설명서를 참조하십시오 : https://github.com/nuxt-community/axios-module#setheadername-value-scopescommon

  • 이전 vba - 파일이 이미 다른 폴더에 저장되어 있는지 확인
  • 다음 javascript - 버튼 클릭시 변수에 +1을 반복적으로 추가하는 방법은 무엇입니까?