代码之家  ›  专栏  ›  技术社区  ›  free

使我的应用程序对所有网络用户可见

  •  0
  • free  · 技术社区  · 2 年前

    我是ReactJS新手。我开发了一个应用程序,它由一个具有多个列的表组成,并且成功地在localhost上呈现了我的应用程序。我的前端可以从 http://localhost:3000 和后端 http://localhost:8000 .我使用MongoDB作为数据库。

    现在我想让我的网络用户能够看到我的应用程序,因此我在IP为的windows服务器上运行我的代码 10.68.10.20 .现在当我的网络用户打开时 http://10.68.10.20/3000 在他们的PC或笔记本电脑上,他们可以看到我的应用程序(以及表本身),但我的表的内容(数据库的内容)对他们来说是不可见的。

    我在控制台中看到此错误:

    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/v1/users?search=. (Reason: CORS request did not succeed). Status code: (null).
    

    那怎么了?我应该在应用程序中进行哪些更改才能让网络用户看到?

    1 回复  |  直到 2 年前
        1
  •  1
  •   Max Yankov    2 年前

    根据错误消息判断,您的应用程序正在尝试向 http://localhost:8000/api/v1/users?search=. .可能是因为你的前端 http://localhost:8000 后端地址硬编码在某处。确保您的后端在端口上可用 8000 发送给您的网络用户 http://10.68.10.20:3000 ,然后在应用程序中更改它。

    在生产应用程序中,这些地址通常不会硬编码到应用程序本身,而是使用 environment variables 这将应用于前端应用程序的构建/捆绑步骤。

    编辑: 正如您所指定的,您已经将环境变量用于 .env 文件,您通常要做的是:

    • 创建一个不同的文件(名称如下 .prod.env )用于生产部署
    • 指定应用程序在其中使用的所有环境变量,例如 REACT_APP_API_URL=http://10.68.10.20:8000/api/v1 在它里面
    • 为其他用户部署应用程序时,请使用此文件,而不是 .环境 用于本地开发的文件

    通过这种方式,您可以轻松地在本地开发和生产的配置之间切换,甚至可以同时启动这两个环境。