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

Fetch in ReactJS with Basic Auth return 401 (Unauthorized). Preflight request doesn#39;t pass access control check(使用 Basic Auth 获取 ReactJS 返回 401(未授权).预检请求未通过访问控制检查)

本文介绍了使用 Basic Auth 获取 ReactJS 返回 401(未授权).预检请求未通过访问控制检查的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 ReactJS 的新手，但我现在正在尝试自学.当我尝试在我的带有 MongoDB 的 RestAPI 中使用我的 Web 应用程序上的 fetch 函数添加数据时，我遇到了一个问题.当我点击我的按钮时，它会运行以下代码:

I'm new at ReactJS but I'm trying to learn by myself now. I'm facing a problem when I try to add data do may Database, in my RestAPI with MongoDB, using fetch function on my web Application. When I click my button, it runs the following code:

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
}

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

and I get the following message on my browser:

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

OPTIONS http://localhost:4000/users/ 401 (Unauthorized)

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

Failed to load http://localhost:4000/users/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 401. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Uncaught (in promise) TypeError: Failed to fetch

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

My RestAPI have Basic Auth, but i don't know what i'm supposed to insert in headers to have access. I got this 'Authorization': 'Basic YWRtaW46c3VwZXJzZWNyZXQ=', from Postman, when I configured the Authorization tab, and it was automatically added to the headers.

我使用谷歌浏览器作为我的默认浏览器.

I'm using Google Chrome as my default browser.

我的后端代码如下:

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');
});

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

问题描述

推荐答案

基础教程推荐