React JS webpack-dev-server apiを呼び出すことができません

Question

私はReactで自分のアプリケーションをビルドしました。そしてwebpack-dev-serverを通して実稼働ビルドでテストしたところ、APIを呼び出すことができませんでした。 私はAXIOSを通じてリクエストしています。

次のエラーがGETリクエストのために発生します。

はPOSTリクエストについてhttp://localhost:8080/api/web/api/get-logged-navbar 404（見つかりません）

をGET、それがアクションをトリガーしません。

リクエストに正しいパスを使用していますが。

マイアプリの重要なフォルダ

は、次のような構成されています

• 公共
• SRC（コンポーネントとアクション）
（bundle.jsはここにあるファイルだけでなく、他のスタイルとスクリプトの資産を構築しました）
• API（APIコードはここにある：Yii2）

WebPACKのコンフィグ：

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, 'public'); 
var APP_DIR = path.resolve(__dirname, 'src'); 

var config = { 
    entry: APP_DIR, 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     include: APP_DIR, 
     loader: 'babel-loader', 
     }, 
     { 
     test: /\.css$/, 
     loaders: ["style-loader","css-loader"] 
     }, 
    ] 
    } 
}; 

module.exports = config; 

プロキシを設定してAPIを別のサーバーポートに配置する必要はありますか？

Answer 1

あなたが言っていることを言っているとすれば、はい、おそらくwebpack-dev-serverのproxy optionがYii2バックエンドにAPIリクエストを転送する必要があります。 APIサーバーがリッスンしているポートを確認し、そのページの例のように/apiをそのポートにプロキシします。

Answer 2

React/WebpackとAxiosを使用してopenweather.orgへのAPI呼び出しを作成した天気アプリを作成しましたが、プロキシが必要ではないと思います。 Axiosに渡すURLを調べる必要があります。あなたのコードを見ることができなければ、さらなる提案をするのは難しいでしょう。