Vue-Request 未发送授权标头答案

【问题标题】：Vue-Request not sending Authorization HeaderVue-Request 未发送授权标头
【发布时间】：2017-12-04 19:13:25
【问题描述】：

我将 VueJS 与 vue-request 一起用于 http 请求。我正在尝试为用户订阅Mailchimp 列表，但Mailchimp 使用BasicAuth，所以我这样做：

   scope.$http.post('https://us15.api.mailchimp.com/3.0/lists/listid/members',
{...mydata...}, {headers: {Authorization: 'Basic myencodedAPIkey'}})

但我收到了来自API: 401 Unauthorized - Your request did not include an API key. 的错误

所以我检查了 Chrome 上的网络日志，授权在我的标题上是这样的：**Access-Control-Request-Headers: authorization** 但它应该像**Authorization: myencodedAPIkey**

在控制台上，错误显示为：

XMLHttpRequest 无法加载 https://us15.api.mailchimp.com/3.0/lists/listid/members。回复预检请求未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许使用原点“http://127.0.0.1:8000” 使用权。响应的 HTTP 状态代码为 401。

当我使用 Postman 时，它可以正常工作，因为标头已正确发送。

【问题讨论】：

标签： http web vue.js vue-resource mailchimp-api-v3.0

【解决方案1】：

这个问题似乎已经通过在每个请求上设置标头来解决 https://laracasts.com/discuss/channels/vue/how-to-solve-the-allow-control-allow-cross-in-the-vuejs-header-request-setting?page=2

在这里通过设置一次 Vue-Request not sending Authorization Header

【讨论】：

【解决方案2】：

当您尝试从一个主机请求另一个主机时，您会收到 CORS 错误，而“另一个”部分不允许它发生。为了防止这个错误你可以使用webpack proxy configuration，这样你就没有跨源请求，但是如果你的api不允许跨源请求，我不知道你将如何在生产环境中处理这个问题。

在我正在做的一个项目中，我们的 devServer 配置如下

    proxy: {
        '/api': {
            target: 'http://localhost:8080/'
        }
    },

这样，/api/any/url 上发生的任何请求都将重定向到 localhost:8080/api/any/url

【讨论】：