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