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}
回答2件
あなたの回答
tips
プレビュー