如何在简单的 React 应用程序中为 AJAX 调用设置代理？

Question

我按照 https://reactjs.org/docs/add-react-to-a-new-app.html 中的描述创建了简单的 React 应用程序，现在想对网络服务器进行 AJAX 调用（使用 PHP）。为了使其与位于 localhost:3000 的开发服务器一起工作，我正在尝试在 package.json

中设置代理

"proxy": {
  "/abc": {
    "target": "http://web.local/app/path/public/abc",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

不幸的是，应用程序使用默认 index.html 内容进行回答。如何在请求 /abc 路径时使代理工作？

有什么方法可以测试和调试代理吗？当我尝试打开 http://localhost:3000/abc 时，我可以看到

[HPM] POST /abc/abc -> http://web.local/app/path/public/abc

在控制台中。但是当我加载应用程序并且从应用程序发送请求时没有消息。（我尝试了 fetch 和 axios 调用。）

当我构建应用程序并运行它在网络服务器上时，一切正常。

编辑： axios ajax 调用的响应 Headers：

HTTP/1.1 404 Not Found
X-Powered-By: Express
Content-Security-Policy: default-src 'self'
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 143
Vary: Accept-Encoding
Date: Wed, 03 Jan 2018 17:44:02 GMT
Connection: keep-alive

对于获取:

HTTP/1.1 301 Moved Permanently
X-Powered-By: Express
Content-Type: text/html; charset=UTF-8
Content-Length: 165
Content-Security-Policy: default-src 'self'
X-Content-Type-Options: nosniff
Location: /abc/
Vary: Accept-Encoding
Date: Wed, 03 Jan 2018 17:58:37 GMT
Connection: keep-alive

和

HTTP/1.1 200 OK
X-Powered-By: Express
Accept-Ranges: bytes
Content-Type: text/html; charset=UTF-8
ETag: W/"649-W8GnY7MkgPFg6/GXObpRHPnVDeU"
Vary: Accept-Encoding
Content-Encoding: gzip
Date: Wed, 03 Jan 2018 17:58:37 GMT
Connection: keep-alive
Transfer-Encoding: chunked

Answer 1

我解决了问题。我的 php 文件位于应用程序的 public/ 目录中（将它们包含在构建中）。并且它可以作为静态内容从开发 Web 服务器访问。现在代理会检查 public/ 中是否存在文件，并在可能的情况下传送它。如果没有这样的文件，则应用规则并尝试从指定的 URL.

中获取数据

所以我将所有 php 相关文件移动到其他位置，并且需要的数据通过代理从 Web 服务器传送，就像

一样

  "proxy": "http://web.local/app/path/static"

在package.json.

我还必须添加单独的命令来将此目录的内容复制到 build/ 并将其添加到构建过程中。

如何在简单的 React 应用程序中为 AJAX 调用设置代理？

How to set proxy for AJAX calls in a simple react app?

php

proxy

reactjs

npm-start