質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

解決済

2回答

2002閲覧

【Angular / AWS】CORSのリクエスト処理

S.N.

総合スコア21

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

0クリップ

投稿2019/07/20 03:32

0. はじめに

  • 基盤の構成が、あんまりイケてないというのも、ご指摘としてはとてもありがたいのですが、ひとまず本質問に沿ってご意見いただきたいです。
  • ひとまず現行環境で動作することを確認してから、構成の再検討をしていくつもりでおりますので、その前提でコメントいただければと思います。

1. 概要

1-1. 実現したいこと

EC2に配置したフロントエンドのアプリ(Angular製)から、バックエンドのAPI(Java/Spring製)にPOSTリクエストを発行してJSONレスポンスを受け取りたいです。

1-1. 困っていること

ブラウザから通信を発行する(ボタンを押してPOSTする等)と、OPTIONSリクエスト(プリフライトリクエスト)がタイムアウトしてしまいます(エビデンスは後述)。

1-2. 質問したいこと

  • 上記「1-1. 困っていること」について、確認すべき事項、抜けている視点があればご指摘いただきたいです。
  • curlとアプリ(Angular)で、受け取れるレスポンスに差が出る(3. 試したことを見てください)のが、なんでなのか全然わかりません。。

1-3. その他

  • ローカルPCではやりたいことを実現できていますので、AWS上に構築した環境下で問題が発生しています。

2. 環境情報

2-1. フロントエンドサーバ

  • Amazon Linux 2です。
  • AngularのアプリをApacheのドキュメントルートに配置しています。
  • 今のところ、LBを介さず固定のGIPを持っていて直接リクエストを受け付けます。名前解決ありです。

Apache:

linux

1[root@ip-10-0-0-184 ~]# apachectl -v 2Server version: Apache/2.4.39 () 3Server built: Apr 4 2019 18:09:28

node.js:

linux

1[worker@ip-10-0-0-184 ~]$ node -v 2v8.16.0

2-2. バックエンドサーバ

  • Amazon Linux 2です。
  • JSONを返すSpring bootのAPIをTomcat上で動かしています。
  • このサーバの手前にALBを配置していて、LB経由でTomcatがリクエストを受け付けます。 

Java:

linux

1[worker@ip-10-0-2-210 ~]$ java -version 2java version "1.8.0_201" 3Java(TM) SE Runtime Environment (build 1.8.0_201-b09) 4Java HotSpot(TM) 64-Bit Server VM (build 25.201-b09, mixed mode)

Tomcat:

linux

1[worker@ip-10-0-2-210 bin]$ ./version.sh 2Using CATALINA_BASE: /workspace/bin/apache-tomcat-8.0.53 3Using CATALINA_HOME: /workspace/bin/apache-tomcat-8.0.53 4Using CATALINA_TMPDIR: /workspace/bin/apache-tomcat-8.0.53/temp 5Using JRE_HOME: /usr 6Using CLASSPATH: /workspace/bin/apache-tomcat-8.0.53/bin/bootstrap.jar:/workspace/bin/apache-tomcat-8.0.53/bin/tomcat-juli.jar 7Server version: Apache Tomcat/8.0.53 8Server built: Jun 29 2018 14:42:45 UTC 9Server number: 8.0.53.0 10OS Name: Linux 11OS Version: 4.14.104-95.84.amzn2.x86_64 12Architecture: amd64 13JVM Version: 1.8.0_201-b09 14JVM Vendor: Oracle Corporation

3. 試したこと

フロントエンドサーバから、curlで直接OPTIONSリクエストを発行すると、200 OKをその場で取得できました。

curl

1[worker@ip-10-0-0-184 ~]$ curl -H "Origin:10.0.0.184" -H "Access-Control-Request-Method: POST" -H "Access-Control-Request-Headers: content-type" -X OPTIONS --verbose http://internal-prod-private-alb-297496988.ap-northeast-1.elb.amazonaws.com:18080/parallel-api/api/v1/user/signup 2* Trying 10.0.3.173... 3* TCP_NODELAY set 4* Connected to internal-prod-private-alb-297496988.ap-northeast-1.elb.amazonaws.com (10.0.3.173) port 18080 (#0) 5> OPTIONS /parallel-api/api/v1/user/signup HTTP/1.1 6> Host: internal-prod-private-alb-297496988.ap-northeast-1.elb.amazonaws.com:18080 7> User-Agent: curl/7.61.1 8> Accept: */* 9> Origin:10.0.0.184 10> Access-Control-Request-Method: POST 11> Access-Control-Request-Headers: content-type 12> 13< HTTP/1.1 200 OK 14< Date: Sat, 20 Jul 2019 02:58:51 GMT 15< Content-Length: 0 16< Connection: keep-alive 17< Server: Apache-Coyote/1.1 18< Allow: GET, HEAD, POST, PUT, DELETE, OPTIONS 19< 20* Connection #0 to host internal-prod-private-alb-297496988.ap-northeast-1.elb.amazonaws.com left intact

一方、同じリクエストを発行するボタンをブラウザから実行すると、Chromeの検証ツールにてこのようなメッセージが出ていました。
この際、もちろんレスポンスは受け取れていません。

javascript

1OPTIONS http://internal-prod-private-alb-297496988.ap-northeast-1.elb.amazonaws.com:18080/parallel-api/api/v1/user/signup net::ERR_CONNECTION_TIMED_OUT

4. アプリケーション

4-1. フロントエンド

  • POSTリクエストを発行する部分は、今のところ以下の実装にしています。

javascript

1/** 2 * 更新系リクエスト共通HTTPヘッダー 3 */ 4private httpHeaders: HttpHeaders = new HttpHeaders({ 5 'Content-Type': 'application/json', 6 'Access-Control-Allow-Origin': '*' 7}); 8/** 9 * 新規利用者のサインアップを実施します。 10 * @param userSigninRequestDto 11 * @returns Observable<UserSignupResponseDto> 12 */ 13public signup(userSignupRequestDto: UserSignupRequestDto): Observable<UserSignupResponseDto> { 14 const options = { 15 headers : this.httpHeaders 16 }; 17 18 // POSTリクエストを実行します。 19 return this.http.post<UserSignupRequestDto>(ServiceConst.URL_USER_REGIST, userSignupRequestDto, options) 20 .pipe(catchError(GlobalErrorHandler.handleError)); 21}

4-2. バックエンド

  • Spring BootのAPIで、コントローラでCORS対応しています(が、本当にできているのかは自信ありません。。)

java

1/** 2 * 実行メソッド 3 * @param UserRegistRequestDto user 4 * @return UserRegistResponseDto 5 */ 6@RequestMapping(value = CtrlConst.FUNC_USERS + CtrlConst.MAP_SIGNUP, consumes = MediaType.APPLICATION_JSON_VALUE, method = RequestMethod.POST) 7@ResponseBody 8@CrossOrigin 9@ResponseStatus(HttpStatus.CREATED) 10public UserRegistResponseDto register(@RequestBody UserRegistRequestDto user) throws Exception { 11 // 具体的な処理がここに入ります 12}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

CHERRY

2019/07/22 04:08

Angular のフロントエンドからアクセスする バックエンドの URL は、グローバル IP アドレスで、インターネットに公開されていますか?
S.N.

2019/07/22 04:46

確認ありがとうございます。 バックエンドサーバのIPは完全にプライベートでして、インターネットからはアクセスできない仕様としています。
退会済みユーザー

退会済みユーザー

2019/07/24 01:53

サーバではなく手元のpcからcurlしたらどうなりますか?
退会済みユーザー

退会済みユーザー

2019/07/24 01:57

> インターネットからはアクセスできない仕様としています。 この時点で何をどうやっても無理だと思いますね。
guest

回答2

0

ベストアンサー

おそらくCORS関係ないです。

バックエンドサーバのIPは完全にプライベートでして、インターネットからはアクセスできない仕様としています。

これが原因でしょう。

ユーザがブラウザでフロントエンドサーバにアクセスした際、JSをダウンロードしてきて端末側で実行させるという動きになります。
つまり、Angular(に限りませんが)は フロントエンドサーバではなく、ユーザの端末で動作 します。

なので、

フロントエンドサーバから、curlで直接OPTIONSリクエストを発行すると、200 OKをその場で取得できました。

この検証は意味がありません。
そのWebアプリを動作させたいのであれば、ユーザの端末からバックエンドサーバのAPIエンドポイントに接続できるようにする必要があります。
まずは手元のPCから curl が成功する状態でなければいけません。

例外

SPAでもSSRとかUniversalとか言われる構成なら話は変わります。
(Angular Universal, Next.js, Nuxt.jsなど)

その場合はAPIリクエストをサーバーサイドNode.jsで行うことも可能だからです。

しかし今回の質問者さんの場合はおそらく採用していないでしょう。

投稿2019/07/24 02:12

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

S.N.

2019/07/24 03:07

ご回答いただき、ありがとうございます。 >フロントエンドサーバではなく、ユーザの端末で動作します そうでした。。とすると、クライアント端末から直接バックエンドにアクセスできないといけないですね。。大変参考になりました。ありがとうございます。時間があるときに構成含め検証進めます。
guest

0

サーバーへ接続できていないというエラーが出ています。

ブラウザを使用しているパソコンからAPIサーバーへping等をして確認してみてください。
接続できないことが確認できたらAPIサーバーのパーミッション関係やファイヤーウォール周りを確認してみると良いのではないでしょうか。

投稿2019/07/24 00:43

s14pes

総合スコア55

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

S.N.

2019/07/24 03:08

ありがとうございます。上記で同じような回答頂いていますのでコメントつけましたが、根本的にバックエンドサーバのネットワーク構成の問題と理解したので、再検討した上で検証いたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問