授权标题 - Javascript Vuejs

时间:2017-08-14 06:00:29

标签: vuejs2 basic-authentication vue-resource

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

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

并且工作正常

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

执行相同的操作
 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

我没有看到授权信息传递给服务器。难道我做错了什么 ?注意:服务器和客户端都在localhost上。

由于

1 个答案:

答案 0 :(得分:0)

vue-resourceretired所以我不认为你应该再使用它了。相反,您如何使用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)
})