0

我按照https://reactjs.org/docs/add-react-to-a-new-app.html中的描述创建了简单的反应应用程序，现在想要对网络服务器进行 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调用。）

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

编辑：axios ajax 调用 的响应标头：

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

对于fetch：

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
4

1 回答 1

0

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

因此，我将所有与 php 相关的文件移动到其他位置，并且所需的数据通过代理从 web 服务器传递，就像 inteded 一样

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

在package.json中。

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

于 2018-01-04T15:08:12.147 回答