使用 Basic Auth 获取 ReactJS 返回 401(未授权)。预检请求未通过访问控制检查

IT技术 javascript mongodb reactjs authentication fetch
2021-05-03 00:25:59

我是 ReactJS 的新手,但我现在正在尝试自学。当我尝试添加数据时遇到问题可能是数据库,在我的 RestAPI 和 MongoDB 中,在我的 Web 应用程序上使用 fetch 函数。当我单击我的按钮时,它运行以下代码:

SubmitClick(){
    //console.log('load Get User page'); //debug only

    fetch('http://localhost:4000/users/', {
      method: 'POST',
      headers: {
        'Authorization': 'Basic YWRtaW46c3VwZXJzZWNyZXQ=',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: 'deadpool@gmail.com',
        first_name: 'Wade',
        last_name: 'Wilson',
        personal_phone: '(11) 91111-2222',
        password: 'wolv3Rine'
      })
    })

    //this.props.history.push('/get'); //change page layout and URL
}

我在浏览器上收到以下消息:

选项http://localhost:4000/users/ 401(未授权)

加载http://localhost:4000/users/失败:对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许访问Origin ' http://localhost:3000 '。响应的 HTTP 状态代码为 401。如果不透明响应满足您的需求,请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

Uncaught (in promise) TypeError: Failed to fetch

我的 RestAPI 具有基本身份验证,但我不知道应该在标头中插入什么才能访问。'Authorization': 'Basic YWRtaW46c3VwZXJzZWNyZXQ=',从 Postman那里得到了这个,当我配置授权选项卡时,它被自动添加到标题中。

我使用 Google Chrome 作为我的默认浏览器。

我的后端代码如下:

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

const app = express();

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');
}); 
2个回答

它可能与 OP 的问题不同,但我能够fetch通过添加凭据模式使基本的 auth 保护es 工作......

fetch(
    'http://example.com/api/endpoint',
    { credentials: "same-origin" }
)

请参阅此处:https : //github.github.io/fetch/在请求 > 选项下

您正在尝试从端口 3000(您的客户端)访问端口 4000(您的 API 或后端)。这违反了同源策略,即使您显然在同一台机器上运行客户端和 API。

要解决这个问题,最简单的方法是从与 API 相同的端口(端口 4000)启动您的客户端,这应该允许您的主机看到您正在尝试从同一个域/端口访问资源,而这不会强制执行预检请求。

如果这不可能,您将不得不为您的 API配置CORS,并且此问题没有提供有关后端的任何详细信息,因此我目前无法指导您如何执行此操作。

当然,如果您在生产中运行两个单独的服务器,这种方法显然不起作用,但这可能超出了本问题的范围。