[英]Connecting APIs node.js backend (firebase) with react.js
我無法連接已連接的node.js后端代碼,並且在后端運行時可以正常工作,但是當我嘗試在前端react.js中使用這些功能時,它將無法正常工作。 我收到一個意外的令牌錯誤,我想是因為它獲取了錯誤的數據。
這是我的后端桌面\\ 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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.