Question

在我的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调用？

Answer 1

您可以使用axios module为nuxt设置标题（您已经这样做了）。

取自their documentation：

setHeader（name，value，scopes ='common'）
name：标题的名称
value：标题的值
范围：仅针对特定类型的请求发送。

的实施例

// 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

将标题添加到nuxt以使用axios进行api休息调用

1 个答案: