从 django 传递环境变量以响应应用程序答案

【问题标题】：pass environment variable from django to react app从 django 传递环境变量以响应应用程序
【发布时间】：2017-06-27 16:12:52
【问题描述】：

我想从 django 传递一个变量来响应应用程序。我知道我可以通过从 html 页面传递 window 对象来做到这一点，但我想知道是否可以使用环境变量来做到这一点。我遇到了这个链接How can I pass a variable from 'outside' to a react app?，它提到使用.env 文件。请告知如何将它与 Django/Python 设置一起使用。

【问题讨论】：

你想从 Django 传递什么来响应？抱歉，问题不是很清楚。
您的 Django 应用程序和您的 React 应用程序可能在不同的环境中运行。您对这项工作的具体设想如何？
@ArpitSolanki @Chris 我不知道我要问的是否可行，但我想看看是否可以将服务器生成的 js 变量保存在环境文件中，以便反应应用程序可以读取它所以{process.env.globallyVisibleVar}
@Dimtry 查看我的更新答案。由于客户端-服务器-应用程序的性质，您尝试执行的操作是不可能的。

标签： django reactjs

【解决方案1】：

只需将其渲染到模板中的脚本标签中即可：

<script type="text/javascript">
    var globallyVisibleVar = {myVar}
</script>

但您必须确保该变量是 JSON 序列化的。您可以编写模板标签或 JSON 序列化它，然后再将其传递给模板上下文。还要确保使用 var 而不是 const 或 let，因为它们是块范围的，不会在您的 react 应用中全局可见。

正如 create-react-app 的文档所说：

环境变量是在构建时嵌入的。由于 Create React App 生成一个静态 HTML/CSS/JS 包，它不可能在运行时读取它们 .要在运行时读取它们，您需要将 HTML 加载到服务器上的内存中并在运行时替换占位符，就像在 here 中描述的那样。或者，您可以随时在服务器上重新构建应用程序。

由于您不想针对每个请求重新构建整个 JavaScript，因此您不能使用它在服务器应用程序 (Django) 和客户端应用程序 (react) 之间共享动态数据。

因此，如果您点击链接，您将阅读以下内容：

将数据从服务器注入页面

与上一节类似，您可以在其中保留一些占位符注入全局变量的 HTML，例如：

<!doctype html>
<html lang="en">
    <head>
    <script>
        window.SERVER_DATA = __SERVER_DATA__;
    </script>

然后，在服务器上，您可以将 __SERVER_DATA__ 替换为 JSON 发送响应之前的真实数据。然后客户端代码可以阅读window.SERVER_DATA 以使用它。 确保清理 JSON 在将其发送给客户端之前，因为它会使您的应用容易受到 XSS 的攻击攻击。

【讨论】：

这就是我目前正在做的，但我想看看是否可以创建某种包含{myVar} 的环境文件，如此处所述stackoverflow.com/a/44669087/446629
您能否为您的问题提供更多背景信息，因为您的意思不是很清楚。您想与您的 React 应用程序共享什么样的数据？ react 应用程序位于客户端，无法直接访问任何 .env 文件。根据您的工具，您当然可以从环境变量生成 js 文件，但这仅适用于数据，通常不会改变。
感谢您对构建时间与运行时间的清晰解释。就我而言，我想检查用户权限，如果该值为 true，则发出 api 请求。 myGlobalObject: {permissions: {permissions}, url: {myapi}...some other properties }.