Angular CLIでプロキシファイルを設定する方法
Angular開発時にフロントエンドがAngularでAPIがJavaだったりするとそれぞれローカル開発環境が異なると思います。
Angular : http://localhost:4200/
java: http://localhost:8080/
こんな感じで開発することになるかと思います。
これだとポートが異なるためオリジンが違うので、クロスドメイン通信が出来ません。
こういう場合は、Angular CLIでCORSを有効にする必要があります。(じゃないとローカル環境で開発出来ません)
ng serve --help
上記コマンドでオプションの一覧が表示されます。CORSを有効にするには--proxy-config
オプションを使用します。
ng serve --proxy-config=a.json
package.jsonと同じ位置にa.jsonファイルを置きます。(ファイル名はなんでもよいです)
ファイルは以下のようにします。
{ "/app/local": { "target": "http://localhost:8080" } }
これで、app/localにリクエストがきた場合にtargetで指定したオリジンにフォワードすることができます。
先にサーバサイドを起動してから、ng serveすればOKです。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント