javascript - 为什么我从 Heroku 应用程序中收到 {"message":"Authentication invalid"}？
问题描述
我在 Heroku 上运行一个 MERN 应用程序。几天来，我收到一条消息：身份验证无效错误。我终于认为我在我的 routes.js 中使用以下代码修复了它-
app.use(express.static('client/build'));
app.get('*', (req, res) => {
res.sendFile(
path.resolve(__dirname, '../client', 'build', 'index.html'),
function (err) {
if (err) {
res.status(500).send(err);
}
}
);
});
}
昨晚的最后一次部署运行良好。
今天早上我收到同样的消息 - {"message":"Authentication invalid"}
在控制台中，我收到以下错误 -
money-tracker-budget-app.herokuapp.com/:1 Failed to load resource: the server responded with a status of 401 (Unauthorized)
/favicon.ico:1 Failed to load resource: the server responded with a status of 401 (Unauthorized)
开始时我的 Heroku 日志-
2020-10-02T12:11:38.291629+00:00 heroku[web.1]: Starting process with command `npm start`
2020-10-02T12:11:42.048013+00:00 app[web.1]:
2020-10-02T12:11:42.048046+00:00 app[web.1]: > moneytracker1@1.0.0 start /app
2020-10-02T12:11:42.048046+00:00 app[web.1]: > node index.js
2020-10-02T12:11:42.048047+00:00 app[web.1]:
2020-10-02T12:11:43.675256+00:00 heroku[web.1]: State changed from starting to up
2020-10-02T12:11:43.637392+00:00 app[web.1]: info: Connected to 57126
2020-10-02T12:11:44.124758+00:00 app[web.1]: Mongoose is connected
2020-10-02T12:11:44.149086+00:00 app[web.1]: info: Connected to the mongodb+srv://*********:*********@cluster-8n304djh.h5exs.mongodb.net/**********?retryWrites=true&w=majority
2020-10-02T12:12:39.430451+00:00 heroku[router]: at=info method=GET path="/" host=money-tracker-budget-app.herokuapp.com request_id=f0774668-7ec9-43c9-ba62-e7dbb7fe8638 fwd="142.120.254.11" dyno=web.1 connect=1ms service=23ms status=401 bytes=285 protocol=https
2020-10-02T12:12:39.896195+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=money-tracker-budget-app.herokuapp.com request_id=3758aa16-c737-4a16-a985-79e3aa46f347 fwd="142.120.254.11" dyno=web.1 connect=1ms service=8ms status=401 bytes=285 protocol=https
下面是我的 index.js-
const app = express();
const winston = require('winston');
require('./startup/logs');
require('./startup/db')();
require('./startup/routes')(app);
const port = process.env.PORT || 5000;
const server = app.listen(port, () => winston.info(`Connected to ${port}`));
module.exports = server;
以下是我的路线
const accounts = require('../routes/accounts');
const auth = require('../routes/auth');
const settings = require('../routes/settings');
const transactions = require('../routes/transactions');
const users = require('../routes/users');
const budgets = require('../routes/budgets');
const budgetCategories = require('../routes/budgetCategories');
//middleware
const jwt = require('express-jwt');
const attachUser = require('../middleware/attachUser');
const cors = require('cors');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const csrf = require('csurf');
const express = require('express');
const csrfProtection = csrf({ cookie: true });
const path = require('path');
const verifyJwt = jwt({
secret: process.env.JWT_SECRET,
iss: 'api.money-tracker',
aud: 'api.money-tracker',
algorithms: ['HS256'],
getToken: (req) => req.cookies.token,
});
module.exports = function (app) {
app.use(cookieParser());
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use('/api/auth', auth);
app.use(attachUser);
app.use(verifyJwt);
app.use(csrfProtection);
app.use('/api/users', users);
app.use('/api/accounts', accounts);
app.use('/api/settings', settings);
app.use('/api/transactions', transactions);
app.use('/api/budgets', budgets);
app.use('/api/budgetCategories', budgetCategories);
if (process.env.NODE_ENV === 'production') {
app.use(express.static('client/build'));
app.get('*', (req, res) => {
res.sendFile(
path.resolve(__dirname, '../client', 'build', 'index.html'),
function (err) {
if (err) {
res.status(500).send(err);
}
}
);
});
}
};
下面是我的服务器 package.json
"name": "moneytracker1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"@hapi/joi": "^17.1.1",
"bcrypt": "^5.0.0",
"bcryptjs": "^2.4.3",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"csurf": "^1.11.0",
"express": "^4.17.1",
"express-async-errors": "^3.1.1",
"express-jwt": "^6.0.0",
"joi": "^17.1.1",
"json-web-token": "^3.2.0",
"jsonwebtoken": "^8.5.1",
"jwt-decode": "^2.2.0",
"moment": "^2.27.0",
"mongoose": "^5.9.25",
"react-cookie": "^4.0.3",
"react-scrollspy": "^3.4.3",
"react-toastify": "^6.0.8",
"winston": "^2.4.5",
"yup": "^0.29.3",
"bl": ">=2.2.1"
},
"devDependencies": {
"concurrently": "^5.2.0",
"env-cmd": "^10.1.0",
"nodemon": "^2.0.4"
},
"scripts": {
"test": "jest --watchAll --verbose --coverage",
"start": "node index.js",
"server": "nodemon index.js",
"client": "npm start --prefix client",
"clientinstall": "npm install --prefix client",
"dev": " env-cmd -f ./config/.env concurrently \"npm run server\" \"npm run client\"",
"build": "cd client && npm run build",
"install-client": "cd client && npm install",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"repository": {
"type": "git",
"url": "www.github.com/Jdowsett21/Repo"
},
"keywords": [
"chatApp"
],
"author": "James Dowsett-Cooper",
"license": "ISC"
}
下面是我在 React 端的 App.js
import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
//redux
import { Provider } from 'react-redux';
import store from './store';
//pages
import Login from './pages/Login';
import AuthenticatedRoutes from './AuthenticatedRoutes';
// import AdminRoutes from './AdminRoutes';
import Signup from './pages/Signup';
import Home from './pages/Home';
import AppShell from './AppShell';
import AuthenticatedNavBar from './AuthenticatedNavBar';
import AddTransaction from './pages/AddTransaction';
const Overview = lazy(() => import('./pages/Overview'));
const Transactions = lazy(() => import('./pages/Transactions'));
const AddAccount = lazy(() => import('./pages/AddAccount'));
const Trends = lazy(() => import('./pages/Trends'));
const Goals = lazy(() => import('./pages/Goals'));
const WaysToSave = lazy(() => import('./pages/WaysToSave'));
const Budgets = lazy(() => import('./pages/Budgets.js'));
const Settings = lazy(() => import('./pages/Settings.js'));
const Profile = lazy(() => import('./pages/Profile.js'));
const LoadingFallback = () => (
<AppShell>
<div className='p-4'>Loading...</div>
</AppShell>
);
const UnauthenticatedRoutes = () => (
<Switch>
<Route exact path='/login'>
<Login />
</Route>
<Route exact path='/signup'>
<Signup />
</Route>
<Route exact path='/'>
<Home />
</Route>
</Switch>
);
const AppRoutes = () => (
<React.Fragment>
<AuthenticatedNavBar />
<Suspense fallback={<LoadingFallback />}>
<Switch>
<AuthenticatedRoutes path='/overview'>
<Overview />
</AuthenticatedRoutes>
<AuthenticatedRoutes path='/transactions'>
<Transactions />
</AuthenticatedRoutes>
<AuthenticatedRoutes path='/goals'>
<Goals />
</AuthenticatedRoutes>
<AuthenticatedRoutes path='/addTransactions'>
<AddTransaction />
</AuthenticatedRoutes>
<AuthenticatedRoutes path='/budgets'>
<Budgets />
</AuthenticatedRoutes>
<AuthenticatedRoutes path='/trends'>
<Trends />
</AuthenticatedRoutes>
<AuthenticatedRoutes path='/waystosave'>
<WaysToSave />
</AuthenticatedRoutes>
<AuthenticatedRoutes path='/accounts'>
<AddAccount />
</AuthenticatedRoutes>
<AuthenticatedRoutes path='/settings'>
<Settings />
</AuthenticatedRoutes>
<AuthenticatedRoutes path='/profile'>
<Profile />
</AuthenticatedRoutes>
<AuthenticatedRoutes path='/tour'>
<Profile />
</AuthenticatedRoutes>
<UnauthenticatedRoutes />
</Switch>
</Suspense>
</React.Fragment>
);
function App() {
return (
<Router>
<Provider store={store}>
<AppRoutes />
</Provider>
</Router>
);
}
export default App;
我的应用程序在本地运行良好。
同样是昨晚，当我的应用程序在安装了 Heroku CLI 的机器上运行良好时，我在几部手机和另一台计算机上对其进行了测试，我得到了同样的身份验证错误。
任何帮助，将不胜感激！
解决方案
推荐阅读
- python - NumPy 通过索引获取多行的快速方法
- html - 如何使这个自定义引导导航栏响应视口大小？
- node.js - 中间件设置 cors 标头适用于 app.use() 但不适用于特定路由
- c - 如何做三个定点数的乘法和加法
- elasticsearch - Elasticsearch 查询，返回所有内容或找到的命中
- firebase - NoSuchMethodError：在 null 上调用了 getter 数据，接收者：null
- android - 查尔斯在浏览器上工作，但不适用于应用程序 - Android
- python - python 多处理 __getnewargs__()
- angular - mat-form-field matInput、matSuffix 和反应形式的意外行为
- apache-spark - Kubernetes 运动以集群模式提交——包没有按预期工作