授权标头 - Javascript Vuejs答案

【问题标题】：Authorization Header - Javascript Vuejs授权标头 - Javascript Vuejs
【发布时间】：2017-08-14 06:00:28
【问题描述】：

我有一个执行 BASIC 身份验证的后端。我正在传递以 curl 编码的用户名/密码，如下所示

curl -D- -X GET -H "Authorization: Basic cmFtcmFtOnBhc3N3b3Jk" -H "Content-Type: application/json" "http://localhost:9000/users/login"

而且效果很好

而在 vue.js 中使用 vue-resource 我正在尝试使用

 var options = {
        url: 'http://localhost:9000/users/login',
        method: 'GET',
        headers: 
        { 
            'Authorization': 'Basic cmFtcmFtOnBhc3N3b3Jk'
        }
    }
    context.$http(options).then(res => {
      if (res.ok) {
        cb({ authenticated: true })
      } else {
        cb({ authenticated: false })
      }
    })

但它没有得到验证。我从devtools得到的请求信息如下

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-GB,en;q=0.8,fr;q=0.6,en-US;q=0.4
Access-Control-Request-Headers:authorization
Access-Control-Request-Method:GET
Connection:keep-alive
DNT:1
Host:localhost:9000
Origin:http://evil.com/
Referer:http://localhost:8080/Login

我没有看到正在传递给服务器的授权信息。难道我做错了什么？注意：服务器和客户端都在本地主机上。

谢谢

【问题讨论】：

标签： vuejs2 basic-authentication vue-resource

【解决方案1】：

vue-resource 是 retired 所以我认为你不应该再使用它了。相反，您不如按照建议改用fetch 看看它是否有效：

fetch('http://localhost:9000/users/login', {
    method: 'POST',
    headers: new Headers({
        'Authorization: Basic cmFtcmFtOnBhc3N3b3Jk',
        'Content-Type': 'application/json'
    }),
    body: JSON.stringify(req.body.payload)
})

【讨论】：