时间戳

首页 > 解决方案 > 将 Appsettings.json (.core) 中的 url 参数传递给 React

c# - 将 Appsettings.json (.core) 中的 url 参数传递给 React

问题描述

我正在尝试访问 appsettings.json 文件中的 url 参数。原因是 api URL 与 Development 发布的不同。我不完全确定解决此问题的最佳方法。

我找到了一个可行的解决方案：

如何使用 asp.net 核心从 appsettings.json 获取配置数据并做出反应

正如我从上面的线程中了解到的，我需要创建一个服务并从 React 调用它？这似乎有点奇怪，因为我总是（？）需要对同一个项目进行 API 请求以接收 API 请求所需的 URL。

另一个建议是使用 webpack，或者以某种方式将 url 保存在客户端。但这是否意味着每当我需要更改环境时，我需要在 2 个地方（后端和前端）进行更改？

这就是我的 appsettings.json 文件的外观（相同的变量，但 .Development 和 .Publish 的值不同）。

{
    "Url": "localhost:44000"
}

在我的 Startup 课程中，我得到了价值：

    var urlValue =
        _configuration.GetSection("Url");

我不能根据后端的环境以某种方式获得价值并使用 React 接收它吗？

不确定我是否在这里想错了？

如果有人能够指出我正确的方向，将不胜感激。

标签： c#reactjs.net-core

解决方案

我对此的解决方案是使用 .env 文档，但仍使用 .core launchSettings env。

为了使这个解决方案起作用，我需要 env-cmd：

npm install env-cmd

添加了 3 个 .env 文件：

 1. .env
 2. .env.development
 3. .env.prod

每个文件都包含一个 url 字符串：

REACT_APP_Url = https://localhost:44000

我在 .core 启动文件中添加了 env check：

    app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseReactDevelopmentServer(npmScript: "start");
                }
                else if (env.IsProduction())
                {
                    spa.UseReactDevelopmentServer(npmScript: "build");
                }
            });

当我运行生产代码时 - 我指的是“构建”，所以在我的情况下，对象“构建”将运行。

package.json 文件：

"scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "cross-env env-cmd -f .env.prod react-scripts start",
  }

我现在可以使用以下方法访问 url： {process.env.REACT_APP_Url}

推荐阅读