如何正确设置 localhost 以进行 react + api 开发答案

【问题标题】：How to properly setup localhost for react + api development如何正确设置 localhost 以进行 react + api 开发
【发布时间】：2018-08-08 15:14:35
【问题描述】：

我正在使用 react-redux 开发应用程序。我正在使用快速开发，它总是在 localhost:3000

构建我的客户端

我的 api 是用 php 编写的，它在 localhost:80 上。

所以它是跨域的，但在生产中它不是。所以我想在同一个域+端口上开发它。但我不知道如何设置它。

我使用 MAMP - Apache 用于 php 和 yarn (create-react-app) 用于反应。

所以它不能在同一个端口上运行。

有人知道如何解决这个问题吗？

当我使用“yarn start”时，我可以编辑我的反应代码并在保存时编译它，我可以在几秒钟内在 localhost:3000 上看到编辑后的代码

是否可以在这种“开发人员”模式下将其“部署”到某个文件夹中，我可以在其中使用实际 MAMP (apache) 设置服务器？

提前致谢

【问题讨论】：

标签： reactjs api

【解决方案1】：

如果您的应用程序的客户端使用create-react-app，您可以在 package.json 文件中添加代理配置。

"proxy": {
    "/apiRoute": {
      "target": "http://localhost:80"
    },
  },

所以您的所有请求都会从客户端重定向到端口 80(PHP)。

/apiRoute 是您在 PHP 中定义的路由 (GET, POST, PUT..) 的名称。所以我建议在 PHP 中为 /api/** 等所有路由创建一个模式，所以在 package.json 中而不是添加所有路由，你可以像下面这样

"proxy": {
  "/api/*": {
     "target": "http://localhost:80"
   },
 },

【讨论】：