0

https://reactjs.org/docs/add-react-to-a-new-app.htmlで説明されているように、単純な反応アプリを作成し、Web サーバーへの 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

コンソールで。しかし、アプリを読み込んでいるときにメッセージが表示されず、アプリからリクエストが送信されます。（フェッチと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

フェッチの場合:

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/ dir にありました（ビルドに含めるため）。また、開発 Web サーバーから静的コンテンツとしてアクセスできます。現在、プロキシはファイルがpublic/に存在するかどうかをチェックし、可能であればそれを配信します。そのようなファイルがない場合は、ルールが適用され、指定された URL からデータを取得しようとします。

だから私はすべてのPHP関連ファイルを他の場所に移動し、必要なデータはWebサーバーからプロキシ経由で配信されます

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

package.jsonで。

また、このディレクトリの内容をbuild/にコピーしてビルド プロセスに追加する別のコマンドを追加する必要がありました。

于 2018-01-04T15:08:12.147 に答える