Javascript VueJs Axios-请求头

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

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

    $(function() {
    var params = {
        // Request parameters
    };

    $.ajax({
        url: "https://demo-api.com/",
        beforeSend: function(xhrObj){
            // Request headers
            xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","{API KEY}");
        },
        type: "GET",
        // Request body
        data: "{body}",
    })
    .done(function(data) {
        alert("success");
    })
    .fail(function() {
        alert("error");
    });
});

问题：

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

我想学习VueJs，并想用VueJs+Axios复制这一点，但是我对如何设置请求头感到困惑，正如我在上面的JS中所做的那样

以下是我失败的尝试：

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

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

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

谢谢。

阅读答案并尝试使用

created（）

lifecycle挂钩，而不是

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

阅读答案并尝试使用

created（）

lifecycle挂钩，而不是

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

---

你的问题不是标题。你设置得很正确。这与URL有关。您正在按如下方式构建URL：

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

您的URL字符串错误。它的末尾有一个额外的报价。这就是为什么你有404错误。这是您需要做的：

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

另外，如果您使用的是Vue而不是jQuery，则不应使用

$.param

函数。相反，请使用适当的查询字符串模块，如。因此，您的实际URL如下所示：

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

---

这里我们使用的是ES2015字符串插值。

您的问题不是标题。你设置得很正确。这与URL有关。您正在按如下方式构建URL：

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

您的URL字符串错误。它的末尾有一个额外的报价。这就是为什么你有404错误。这是您需要做的：

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

另外，如果您使用的是Vue而不是jQuery，则不应使用

$.param

函数。相反，请使用适当的查询字符串模块，如。因此，您的实际URL如下所示：

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

---

这里我们使用的是ES2015字符串插值。

可能是@Vucko的重复，我将其用作参考点，但这会产生404响应。我担心的是，我是不是搞错了？我建议您考虑一下jquery+vuejs组合的用法@拉基格里，你能再详细说明一下吗？感谢@Vucko的可能副本，我已经使用它作为参考点，但是这会产生404响应。我担心的是，我是不是搞错了？我建议您考虑一下jquery+vuejs组合的用法@拉基格里，你能再详细说明一下吗？Thanks@Thanks，我已经更新了代码以删除它。响应仍然返回404。@谢谢，我已经更新了代码以删除它。响应仍然返回404。谢谢，@vladja。我才刚开始学习，所以非常感谢您的回复。我将代码修改为这个片段，然后返回404:Thank，@vladja。我才刚开始学习，所以非常感谢您的回复。我将代码修改为这个片段，然后返回404：