部署React页面，Auth0到Heroku不工作

Question

这是我第一次在StackOverflow上发帖。谢谢你的精彩社区。我想问一下如何将Auth0部署到Heroku上。

我的正常行为"HTTP://localhost:3000"它将重定向到Auth0登录页面，当用户成功登录时，它将重定向回该页面。我的React应用程序与Auth0工作非常正常在本地主机，然而，当它在Heroku上，它说:"没有认证令牌找到"。如下所示:

[heroku消息][1][1]: https://i.stack.imgur.com/CDO3O.png

我已经尝试了Auth0教程使用这个链接:https://auth0.com/docs/quickstart/spa/react/01-login，然而，它只适用于本地主机，即使我添加了Auth0插件在Heroku和Heroku的SSO集成在Auth0。

我的React应用程序中的代码:

import React from "react";
import { useHistory } from "react-router-dom";
import { Auth0Provider } from "@auth0/auth0-react";
require('dotenv').config()
const Auth0ProviderWithHistory = ({ children }) => {
const domain = process.env.REACT_APP_AUTH0_DOMAIN
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID
const history = useHistory()
const onRedirectCallback = (appState) => {
history.push(appState?.returnTo || window.location.pathname)
}
return (
<Auth0Provider
domain={domain}
clientId={clientId}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
audience={process.env.REACT_APP_AUTH0_AUDIENCE}
scope={process.env.REACT_APP_AUTH0_SCOPE}
useRefreshTokens={true}
>
{children}
</Auth0Provider>
)
}
export default Auth0ProviderWithHistory

在我的Express服务器:

const jwt = require('express-jwt')
const jwks = require('jwks-rsa')
var jwtCheck = jwt({
secret: jwks.expressJwtSecret({
cache: true,
rateLimit: true,
jwksRequestsPerMinute: 5,
jwksUri: process.env.JWKS_URI
}),
audience: process.env.JWT_AUDIENCE,
issuer: process.env.JWT_ISSUER,
algorithms: ['RS256']
})
app.use(jwtCheck)

为Heroku托管的生产模式:

// Production mode: Heroku
if (process.env.NODE_ENV === "production"){
app.use(express.static(path.join(__dirname,"client", "build")))
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname,"client", "build", "index.html"));
})
}

使用JWTcheck的正常API是:

router.route('/delete/:id').delete(jwtCheck,async (req, res) => {
await Queue.findByIdAndDelete(req.params.id).exec((err, inventory) => {
if (err) return (err)
const response = {
message: "Successfully deleted",
id: req.params.id
}
return res.status(200).send(response)
})
})

有人能帮帮忙吗

非常感谢。

Answer 1

解决方案是将此从server.js中删除，因为jwtCheck函数是为了保护带有用户会话密钥的API，因此，在server.js中包含此函数对于没有会话密钥的GET请求将显示如上所述错误。只使用上面的jwtCheck来保护API。别犯我愚蠢的错误。