Question

我已经在Heroku上部署了一个React / Express应用程序。我正在使用BrowserRouter。本地一切正常。我的问题是后端路由不起作用。唯一可行的路线是综合路线。总括路线由于某种原因也被叫了三遍。我使用'req.path'控制台记录了请求路径，以查看正在调用的路径。应该是“ / google”。相反，这三个调用为req.path提供了三个不同的日志。它们是：'/ static / css / main.814455d3.chunk.css.map'，'/ static / js / main.06bdb7f0.chunk.js.map'，'/ static / js / 1.1baafe13.chunk.js。地图'。我希望有人可以提供帮助。

我已经被困了一天多了。这是客户端的我的package.json和static.json：

static.json

{
  "root": "build/",
  "clean_urls": false,
  "routes": {
  "/**": "index.html"
 }
}

package.json

{
  "name": "workout_tracker",
  "version": "0.1.0",
  "private": true,
   "dependencies": {
     "axios": "^0.18.0",
      "jw-paginate": "^1.0.2",
      "jw-react-pagination": "^1.0.7",
       "normalize.css": "^8.0.0",
      "query-string": "^6.2.0",
      "random-id": "0.0.2",
      "react": "^16.5.2",
      "react-dom": "^16.5.2",
      "react-headroom": "^2.2.2",
       "react-icons-kit": "^1.1.6",
      "react-redux": "^5.0.7",
      "react-router-dom": "^4.3.1",
       "react-scripts": "^2.0.5",
      "react-swipe-to-delete-component": "^0.3.4",
      "react-swipeout": "^1.1.1",
      "redux": "^4.0.0",
      "redux-thunk": "^2.3.0"
    },
   "scripts": {
     "start": "react-scripts start",
    "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
    },

      "devDependencies": {
        "redux-devtools-extension": "^2.13.5"
        },
       "proxy":"localhost:4000",
     "browserslist": [
         ">0.2%",
         "not dead",
         "not ie <= 11",
        "not op_mini all"
    ]

   }

这是我来自express的package.json

     {
  "name": "expresstest",
  "version": "1.0.0",
  "description": "app to test express and mysql",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"node app.js",
    "heroku-postbuild": "cd client && npm install && npm run build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.3",
    "connect-flash": "^0.1.1",
    "cookie-session": "^2.0.0-beta.3",
    "cors": "^2.8.4",
    "express": "^4.16.3",
    "mysql": "^2.16.0",
    "passport": "^0.4.0",
    "passport-google-oauth20": "^1.0.0"
  }
}

这是服务器代码的一部分。我忽略了其他路线，因为除了通行路线之外，没有其他路线被调用。

let express = require("express");
let cors= require("cors");
let mysql = require("mysql");
const util = require("util");
const keys = require("./config/keys");
const passport = require("passport");
const passportSetup = require("./config/passport-setup");
const bodyParser = require("body-parser");
const flash= require("connect-flash");
const path= require("path");

console.log("process env");
console.log("-------");
console.log(process.env.PWD);

const cookieSession = require("cookie-session");

let app = express();
app.use(bodyParser.json());


app.use(cookieSession({
    maxAge:24 * 60 * 60 * 1000,
    keys:[keys.session.cookieKey]   
}));

app.use(passport.initialize());
app.use(passport.session());

if (process.env.NODE_ENV === 'production') {
    console.log("inside prod");
    app.use(express.static('client/build'));
} 

let connection =keys.connection;

app.get("/google", passport.authenticate("google",{

    scope:['profile'],
    failureFlash:"failure"

}),(req,res)=>{
    // console.log(req.flash());
    console.log("/google route");
});


const port = process.env.PORT || 4000;
let http = require("http");
let server = http.createServer(app,(req,res)=>{
    res.writeHead(200, {"Access-Control-Allow-Origiin": "*"})
});

app.get('/*', (req, res) => {
    console.log("catchall");
    console.log(req.hostname);
    console.log(req.path);
    console.log(path.join(__dirname + '/client', 'build', 'index.html'));
  res.sendFile(path.join(__dirname + '/client', 'build', 'index.html'));
})

server.listen(port, ()=>{
    console.log("Listening on "+ port)
});

这是我的文件夹结构：

Link to pic of my folder structure

编辑：我开始工作了，这里是有效的代码。我不知道为什么会这样。我只是尝试了一些我在博客上发现的针对React / Express / Heroku项目的东西。如果有人能告诉我它为什么起作用，将不胜感激。

let express = require("express");
let cors= require("cors");
let mysql = require("mysql");
const util = require("util");
const keys = require("./config/keys");
const passport = require("passport");
const passportSetup = require("./config/passport-setup");
const bodyParser = require("body-parser");
const flash= require("connect-flash");
const path= require("path");

console.log("process env");
console.log("-------");
console.log(process.env.PWD);

const cookieSession = require("cookie-session");



let app = express();
app.use(bodyParser.json());
app.use(express.static(__dirname));


app.use(cookieSession({
    maxAge:24 * 60 * 60 * 1000,
    keys:[keys.session.cookieKey]   
}));


app.use(passport.initialize());
app.use(passport.session());

if (process.env.NODE_ENV === 'production') {
    console.log("inside prod");
    app.use(express.static('client/build'));
} 




let connection =keys.connection;


app.get("/google", passport.authenticate("google",{

    scope:['profile'],
    failureFlash:"failure"

}),(req,res)=>{
    // console.log(req.flash());
    console.log("/google route");
});


const port = process.env.PORT || 4000;
let http = require("http");
let server = http.createServer(app,(req,res)=>{
    res.writeHead(200, {"Access-Control-Allow-Origiin": "*"})
});

app.get("/service-worker.js", (req, res) => {
  res.sendFile(path.join(__dirname + "/client","build", "service-worker.js"));
});

app.get('/*', (req, res) => {
    console.log("catchall");
    console.log(req.hostname);
    console.log(req.path);
    console.log(path.join(__dirname + '/client', 'build', 'index.html'));
  res.sendFile(path.join(__dirname + '/client', 'build', 'index.html'));
})

server.listen(port, ()=>{
    console.log("Listening on "+ port)
});

React / React-Router / Express / Heroku路由问题

0 个答案: