Javascript 使用基本身份验证返回401（未经授权）获取ReactJS。飞行前请求不'；无法通过访问控制检查

我是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: '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
}

我在浏览器上看到以下消息：

选项401（未经授权）

加载失败：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。因此，不允许访问源“”。响应的HTTP状态代码为401。如果不透明响应满足您的需要，请将请求的模式设置为“no cors”，以获取禁用cors的资源

未捕获（承诺中）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');
}); 

---

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

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

如果这是不可能的，你将不得不为你的API配置，这个问题没有给出任何关于后端的细节，所以我现在无法指导你如何做

---

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

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

fetch

es正常工作

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

---

请参见此处：在请求>选项下

浏览器中页面url的可能重复项？如果不是

http://localhost/4000

（可能是因为您使用的是webpack），那么您的API服务器应该设置一个

访问控制允许源站

标题浏览器中的url是

http://localhost:3000/

。我正在试图弄清楚如何设置这个

访问控制允许源代码，我将在这里添加我的后端代码@hmr最简单的方法是安装chrome的
允许控件Allow Origin:
扩展：我试图避免这种情况，因为这个项目需要在另一台我不负责的计算机上运行。我将向最终用户提供说明，但可能有一种方法可以通过编程实现。在这种情况下，如果我的后端已经在端口3000中运行，那么我无法在同一端口中运行，例如，当我向我的客户端发送命令
npm start
时，我会收到以下消息：
？端口3000上已在运行某些内容。是否改为在其他端口上运行应用程序？（Y/n）
但是，在相反的场景中，我的意思是，如果我的客户端已经在端口3000上运行，并且发送到命令
节点索引
执行我的后端，那么它可以正常工作。我将用后端代码编辑我的问题，因为每个系统运行在不同的端口。谢谢你的回复。在这里，我用我的index.js代码为我的后端编辑了我的问题。嘿@JoshSiegl我想它现在可以工作了，我按照这个链接中的说明进行了操作。现在我得到一个401错误，它与未经授权的访问有关。我已经在搜索itAwesome@rk_Tinelli了，这是个好消息。我很高兴能帮上忙。嗨@rk_Tinelli，你是如何用basic auth解决401问题的？你愿意和我分享吗？谢谢，我想在请求头中设置
凭据：“include”
可能是解决方案？