Question

编辑：这可能是CORS问题，我在本地主机上...

在Javascript中，我可以设置请求标头并获取并返回响应，如下所示：

    new Vue({
      el: '#app',
      data () {
        return {
          info: null,
          loading: true,
          errored: false,
          response: false
        }
      },
      mounted () {
          axios({
              method: 'get',
              url: 'https://demo-api.com/',
              headers: { 
                'Ocp-Apim-Subscription-Key': 'API KEY',
              } 
            })
            .then(response => {
              console.log(response)
              this.response = true
            })
            .catch(error => {
              console.log(error)
              this.errored = true
            })
            .finally(() => this.loading = false)
        }
    })

问题：

我想学习VueJ，并想用 VueJs + Axios 复制它，但是我对如何设置请求标头感到困惑，就像我在上面那样JS。

这是我失败的尝试：

 xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","{API KEY}");

如何像上面的JS中一样专门设置 request标头。我想学习如何在Vue / Axios中实现以下功能。

def new
  @number = Course.where(course_type: "physical")
  @new_number = @number.ids
end

谢谢。

Answer 1

Difference between the created and mounted events in Vue.js

阅读答案，并尝试使用created()生命周期挂钩而不是mounted()

此外，您可以使用此标头创建单独的axios实例以进行请求，然后在您的代码中使用它：

axios-demo-api.js

import axios from 'axios'

const instance = axios.create({
    baseURL: 'https://demo-api.com',
    headers: {'Ocp-Apim-Subscription-Key': 'API KEY'} //don't forget to change API key to your exact key
})

export default instance

用法：

import axiosInstance from 'axios-demo-api';


export default {

 created() {
  axiosInstance.get('/{demoId}?' + $.param(params))
                .then(response => {
              console.log(response)
              this.response = true
            })
            .catch(error => {
              console.log(error)
              this.errored = true
            })
            .finally(() => this.loading = false)
 }
}

Answer 2

您的问题不是标题。您正在正确设置。它与URL有关。您正在像这样构造您的URL：

url: 'https://demo-api.com/{demoId}?" + $.param(params)',

您的URL字符串错误。最后有一个额外的报价。这就是为什么您收到404错误的原因。这是您需要做的：

url: "https://demo-api.com/{demoId}?" + $.param(params),

此外，如果您使用的是Vue而不是jQuery，则不应使用$.param函数。相反，请使用适当的查询字符串模块，例如qs。因此，您的实际网址应为：

url: `https://demo-api.com/${demoId}?${qs.stringify(params)}`,

这里我们正在使用ES2015字符串插值。

VueJs Axios-请求标头

2 个答案: