Javascript 将API node.js后端（firebase）与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;

import React，{Component}来自'React'；
导入“/App.css”；
类应用程序扩展组件{
状态={用户：[]}
componentDidMount（）{
获取（“/users”）
.then（res=>res.json（））
.then（users=>this.setState（{users}））；
}
render（）{
返回(
使用者
{this.state.users.map（user=>
{user.username}
)}
);
}
}
导出默认应用程序；

它不是从数据库中获取数据，我甚至无法在运行“纱线开始”时编译它。我得到这个错误：

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 | 

未处理的拒绝（SyntaxError）：JSON中位置0处的意外标记<
6 | 
7 |组件安装（）{
8 |获取（“/users”）
然后（res=>res.json（））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);
});

---

Ref:

您的react应用程序和节点应用程序是否在同一端口上运行？如果没有，您将不得不在同一端口或通过反向代理运行它们。是的，我甚至尝试在我的users.js中使用3001，并在my package.json中添加了一个代理3001。此外，以下是我的firebase数据库的外观：