获取ReactJS与基本认证返回401（未经授权）。飞行前请求未通过权限改造检查

Question

我是ReactJS的新手，但我现在正努力自学。当我尝试使用web应用程序上的fetch函数在我的RestAPI with MongoDB中添加数据do may数据库时，我遇到了一个问题。当我单击我的按钮时，它运行以下代码：

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: '[e-mail]',
        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/: 对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。起源'http://localhost:3000因此，不允许访问。响应的HTTP状态代码为401。如果不透明响应满足您的需要，请将请求的模式设置为“no cors”，以获取禁用cors的资源。

未捕获（在promise）TypeError：未能获取

我的RestAPI有基本的Auth，但我不知道应该在头中插入什么才能访问。当我配置授权选项卡时，我从Postman那里得到了这个“授权”：“Basic YWRtaW46c3VwZXJzZWNyZXQ=”，，它被自动添加到标题中。

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

我的后端代码如下所示：

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

Answer 1

您正试图从端口3000（您的客户端）访问端口4000（您的API或后端）。这违反了同源策略，即使您显然是从同一台机器上运行客户端和API。

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

如果这是不可能的，您将不得不为您的应用编程接口配置CORS，这个问题没有给出任何关于后端的细节，所以我目前无法指导您如何做到这一点。

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

Answer 2

这可能与OP的问题不同，但我能够通过添加凭据模式使基本的身份验证保护fetches正常工作。。。

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

请看这里：https://github.github.io/fetch/ 根据要求