gpt4 book ai didi

javascript - 将 API Node.js 后端(Firebase)与 React.js 连接

转载 作者:行者123 更新时间:2023-12-03 01:39:28 25 4
gpt4 key购买 nike

我在连接我的node.js后端代码时遇到了问题,这些代码已连接并且在后端运行时工作正常,但是当我尝试在前端react.js中使用这些函数时却没有工作。我收到意外 token 的错误,我认为是因为它获取了错误的数据。

这是我的后端桌面\test\src\users.js:

var express  = require('express');

var app = express();

var Firebase = require('firebase');

var morgan = require('morgan');

var bodyParser = require('body-parser');

var Rebase = require('re-base');

app.use(function(req, res, next) {

res.setHeader("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Methods", "POST, PUT, OPTIONS, DELETE, GET");

res.header("Access-Control-Max-Age", "3600");

res.header("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

next();

});


Firebase.initializeApp({

apiKey: test.apiKey,

authDomain: test.authDomain,

databaseURL: test.databaseURL,

projectId: test.projectId,

storageBucket: test.storageBucket,

messagingSenderId: test.messagingSenderId,

serviceAccount: './testapp.json',

});


var db = Firebase.database();

var usersRef = db.ref("Users/");
console.log("reached here.");
app.get('/api/users', function(req, res)
{
var array = [];
usersRef.on("value", function(snapshot)
{
snapshot.forEach(function(data)
{
var usernames =data.child("username").val();
var user = { "username": usernames};
array.push(user);
});
res.json(array);
});
});
app.listen(8000);

console.log("port is 8000");

desktop\test\src\test.js 包含我的 firebase 信息。我把 X 只是为了在这里展示。

module.exports = {     
apiKey: "XXXXXXXXXXXXXXXXXXXXXXUrQT8_WyGeZYSkNIA",
authDomain: "authentication-efba4.firebaseapp.com",
databaseURL: "https://authentication-efba4.firebaseio.com",
projectId: "authentication-efba4",
storageBucket: "authentication-efba4.appspot.com",
messagingSenderId: "XXXXX8179075"

};

这是我的前端桌面\test\src\App.js:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
state = {users: []}

componentDidMount() {
fetch('/users')
.then(res => res.json())
.then(users => this.setState({ users }));
}

render() {
return (
<div className="App">
<h1>Users</h1>
{this.state.users.map(user =>
<div key={user.id}>{user.username}</div>
)}
</div>
);
}
}

export default App;

它没有从数据库中获取数据,当我运行yarn start时我什至无法编译它。我收到此错误:

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0
6 |
7 | componentDidMount() {
8 | fetch('/users')
9 | .then(res => res.json()) <--
10 | .then(users => this.setState({ users }));
11 | }
12 |

最佳答案

使用以下函数拍摄数据库快照

var ref = db.ref("server/saving-data/fireblog/posts");

// Attach an asynchronous callback to read the data at our posts reference
ref.on("value", function(snapshot) {
console.log(snapshot.val());
}, function (errorObject) {
console.log("The read failed: " + errorObject.code);
});

引用号:https://firebase.google.com/docs/database/admin/retrieve-data

关于javascript - 将 API Node.js 后端(Firebase)与 React.js 连接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50921486/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com