node.js - 使用 reactjs 和 nodejs 重定向不起作用

问题描述

我正在创建一个登录系统，前端使用 React，后端使用 Express。我已经创建了主页、登录和注册页面，当我在本地运行应用程序时它工作正常，但是当我将它上传到 Heroku 时它会中断，例如：

如果我把这个“http://localhost:3000/Register”放在浏览器中，注册页面加载正常，但是当我在 heroku 的应用程序中做同样的事情时，就像这样“https://twitterweb2.herokuapp.com/Register”然后它坏了，它没有加载，我收到“Cannot GET /Register”消息。我很清楚我可以在服务器端处理这个问题，它确实可以工作，但为什么现在不能工作？

这是我的反应代码：

import React from 'react';
import { BrowserRouter, Route } from "react-router-dom";
import Home from './pages/Home/Home';
import Raiz from './pages/Raiz/Raiz';
import Login from './pages/Login/Login';
import Register from './pages/Register/Register';
import './App.css';

function App() {
  return (
    <BrowserRouter>
      <Route exact path="/" component={Raiz} />
      <Route exact path="/Register" component={Register} />
      <Route exact path="/Login" component={Login} />
      <Route exact path="/Home" component={Home} />
    </BrowserRouter>
  );
};

export default App;

这是我的服务器代码：

var express = require('express')
const bcrypt = require('bcrypt')
const { Client } = require('pg')
const { response } = require('express')

var app = express()

const connectionData = {
  user: 'postgres',
  host: 'localhost',
  database: 'dblocal',
  password: '123456',
  port: 5432,
}

const client = new Client(connectionData)
client.connect()

const port = 3030;

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})
app.use(express.static('public'));

app.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,DELETE");
  res.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Access-Control-Allow-Headers, Content-Type, Authorization, Origin, Accept");
  next();
});

app.use(express.json());
app.post('/pages/Register', async (request, responsee) => {
  const hashedPassword = await bcrypt.hash(request.body.password, 10);
  console.log(hashedPassword);   
  const data = request.body;

  client
    .query("select * from usuario where correo = '" + data.email + "'")
    .then(response => {
      if (response.rowCount>=1) {
        responsee.json({
          status: 'user already exists'
        });
      }
      else (
        client
          .query("insert into usuario (nombre, apellido, correo, usuario, passwordd) values ('"+data.name+"', '"+data.lastname+"', '"+data.email+"', '"+data.username+"', '"+hashedPassword+"')")                                
          .then(response => {
            responsee.json({
              status: 'user successfully created'
            })
          })
          .catch(err => {
            console.log("se ha creado exitosamente");
          })
      )
    })
    .catch(err => { })
});

app.post('/pages/Login', async (req, res) => {
  const hp = await bcrypt.hash(req.body.password, 10);
  client
    .query("select * from usuario where correo = '" + req.body.email + "'")
    .then (async response => {
      if (response.rowCount>=1) { 
        if (await bcrypt.compare(req.body.password, response.rows[0].passwordd))
          res.json({
            status: 'success'
          });
        else
          res.json({
            status: 'fail'
          });
      }
    });
});

标签： node.jsreactjsexpress

node.js - 使用 reactjs 和 nodejs 重定向不起作用

问题描述

解决方案

推荐阅读