React process.env 正确打印所有变量，但单个环境变量无法访问

Question

请注意：虽然这个问题提到了OIDC，但我相信这本质上是一个纯粹的JS/React问题，不需要React OIDC的经验来回答！

---

我有一个带有以下内容的 React 应用程序

index.jsx

:

import React from "react";
import ReactDOM from "react-dom";
import { createRoot } from 'react-dom/client';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { AuthProvider } from "react-oidc-context";
import Dashboard from "./users/Dashboard";
import AcceptInvitation from "./users/AcceptInvitation";
import ExpiredToken from "./users/ExpiredToken";
import AboutUs from "./web/AboutUs";
import AccountSettings from "./users/AccountSettings";
import ErrorBoundary from './ErrorBoundary';
import { keycloakBaseUrl } from './keycloak/KeycloakConstants';

const oidcConfig = {
    authority: keycloakBaseUrl,
    client_id: process.env.REACT_APP_KEYCLOAK_CLIENT,
    redirect_uri: process.env.REACT_APP_KEYCLOK_REDIRECT_URL
};

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
    <ErrorBoundary>
        <Router>
            <AuthProvider {...oidcConfig}>
                <Routes>
                    <Route path="/about-us" element={<AboutUs />} />
                    <Route path="/accept-invitation" element={<AcceptInvitation />} />
                    <Route path="/account-settings" element={<AccountSettings />} />
                    <Route path="/dashboard" element={<Dashboard />} />
                    <Route path="/error" element={<ErrorBoundary />} />
                    <Route path="/expired-token" element={<ExpiredToken />} />
                </Routes>
            </AuthProvider>
        </Router>
    </ErrorBoundary>
);

KeycloakConstants.js

看起来像：

const KEYCLOAK_HOST_AND_PORT = process.env.KEYCLOAK_HOST_AND_PORT;
const KEYCLOAK_REALM = process.env.KEYCLOAK_REALM;
const keycloakBaseUrl = `${KEYCLOAK_HOST_AND_PORT}/realms/${KEYCLOAK_REALM}`;

console.log("keycloakBaseUrl = " + keycloakBaseUrl);
console.log(process.env);

export { keycloakBaseUrl };

当我尝试访问经过身份验证的页面/路由时，我收到一条错误，表明我的 OIDC 信息未正确加载：

“糟糕...无效响应内容类型：text/html；charset=utf-8，来自 URL：undefined/realms/undefined/.well-known/openid-configuration”

当我打开开发人员工具以查看我的

KeycloakConstants.js

页面的控制台日志输出时，我看到：

keycloakBaseUrl = undefined/realms/undefined

{NODE_ENV: 'development', PUBLIC_URL: '', WDS_SOCKET_HOST: undefined, WDS_SOCKET_PATH: undefined, WDS_SOCKET_PORT: undefined, …}
FAST_REFRESH
: 
true
NODE_ENV
: 
"development"
PUBLIC_URL
: 
""
REACT_APP_API_GATEWAY
: 
"http://localhost:9200"
REACT_APP_FULL_NAME
: 
"My app"
WDS_SOCKET_PORT
: 
undefined
[[Prototype]]
: 
Object

所以

process.env

加载得很好，只是不是我个人的

KEYCLOAK_HOST_AND_PORT

和

KEYCLOAK_REALM

环境变量。谁能发现我哪里出了问题吗？我是否需要在

KeycloakConstants.js

顶部添加任何内容才能使其正确加载环境变量？

Answer 1

您的环境变量需要以 REACT_APP_ 为前缀，以便 React 能够使用它们。

如果您无权更改它们，那么您需要像这样在 env 文件中重新定义它们

REACT_APP_KEYCLOAK_HOST_AND_PORT=${KEYCLOAK_HOST_AND_PORT}

这将获取系统环境变量并使其在react中可访问。