Question

我在这里遇到问题，我正在使用ReactJS开发Rest API和Web App。我试图向Rest API发出fetch请求，但总是收到401代码，意味着未经授权的访问。我在以下代码中发送fetch request：

  SubmitClick(){

    if (this.state.password !== this.state.reTypepassword){
      alert('Passwords do not match. Please check your data !');
    } else {
      //console.log(this.state); //debug only
      fetch('http://localhost:4000/users/', {
        method: 'POST',
        headers: {
          'Authorization': 'Basic YWRtaW46c3VwZXJzZWNyZXQ=',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: this.state.email,
          first_name: this.state.first_name,
          last_name: this.state.last_name,
          personal_phone: this.state.personal_phone,
          password: this.state.password
        })
      }).then(this.props.history.push('/get'));  //change page layout and URL
    }
  }

如您所见，我在此结构后面的请求中插入了Authorization标头：('Authorization' : 'Basic ' + encoding)。我在Postman软件的请求中获得了编码值。

以下是我的Rest API的代码，我在其中配置了允许的用户和密码：

const express =     require('express');
const bodyParser =  require('body-parser');
const mongoose =    require('mongoose');
var basicAuth =     require('express-basic-auth')

const app = express();

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

mongoose.connect('mongodb://localhost/usersregs', { useMongoClient: true });
mongoose.Promise = global.Promise;

app.use(basicAuth({
    users: {
        'admin': 'supersecret',
        'adam': 'password1234',
        'eve': 'asdfghjkl'
    }
}))

app.use(bodyParser.json());

app.use(function(err, req, res, next){
    console.log(err);
    //res.status(450).send({err: err.message})
});

app.use(require('./routes/api'));  

app.listen(4000, function(){
    console.log('Now listening for request at port 4000');
});

使用Google Chrome开发者工具，我可以在此操作中看到请求标头as you can see here

如果我删除了我配置用户和密码的代码部分（在Rest API中），以及配置授权标头（Web App）的部分，则代码可以正常工作。我无法使用Authorization标头。

我应该如何处理获取请求中的Authorization标头，以便我可以访问Rest API？

Answer 1

看起来问题与您正在使用的express-basic-auth模块有关。请参阅documentation：

的这一部分

中间件现在将检查传入的请求以匹配凭据admin:supersecret。

中间件将检查传入的基本身份验证（Authorization）标头请求，解析并检查凭据是否合法。如果有任何凭据，则会在请求中添加一个auth属性，其中包含一个带有用户和密码属性的对象，并填充凭据，无论它们是否合法。

该文档未提及有关授权标头的Basic + encoding的任何内容。您应该尝试使用admin:supersecret作为授权标头的值。

<强>更新

我认为你在滥用这个模块。 express-basic-auth似乎仅用于确保您经过身份验证，并允许您通过API获取信息。它在服务器中具有硬编码的用户/密码凭据，这似乎不允许以您使用的方式进行注册。包描述说，

简单插头＆amp;为Express播放HTTP基本身份验证中间件。

所以它只是HTTP基本身份验证。对于注册/登录系统，我会recommend using passport。

401（未经授权）ReactJS

1 个答案: