Google App Engine Java スタンダード環境の Spring BootでVuetify導入からクロスドメインAjax通信

Webアプリ(およびWebサービス)の基盤環境を、GAE Java(Spring Boot) ＋ Vueで作成していく。

とりあえず、上記までの動作確認まで。

1.Vuetify導入

1.1 Vue CLIのインストールとVueプロジェクトの作成とVuetityの適用

Vue の開発ツール、Vue CLI をインストール

> npm install -g @vue/cli

プロジェクトの作成

> vue create my-app-name
> cd my-app-name

Vuetifyの適用、これで、VueプロジェクトでVuetifyが適用される

> vue add vuetify

1.2 ビルドの出力先を変更

サーバー側とまとめて、GAEに上げたいので、Eclipse上で完結できるといいのだが、近ごろのJavascript開発はそうもいかなさそう。Visual Studio Code でUIがわのVuetify を編集して、GAEのsutaticリソースディレクトリにビルド結果を出力するようにするために、Vue Configを編集

Vue Configuration リファレンス　https://cli.vuejs.org/config/

vue.config.js を編集

module.exports = {
   outputDir: '../FavPhrase/src/main/resources/static',
   indexPath: '/index.html',
   devServer: {
        host: '0.0.0.0',
        port: 8081
    }
}

outputDir で、GAEプロジェクトのスタティックディレクトリを指定、devServerで、GAEと異なるポートを指定して、開発時には、同時に実行Vuetify から GAEにアクセスできるようにする。

1.3 実行とビルド

実行

> npm run serve

ビルド

> npm run build

1.4 Vuetify チュートリアル

以下のyoutubeチャンネルが秀逸。

VuetiVuetify Tutorial(youtube)

2.Vuetify から GAE(Spring Boot)へREST接続

上記で、GAEとVuetifyをポート自害で同時に実行できるようになったので、Vuetifyを実行して、GAE(Spring Boot)のREST APIにアクセスさせる。

2.1 Spring Boot 側 REST API

@RestController
public class ApiController {
	@GetMapping("/api/hello")
	public String hello() {
		return "Hello GAE Java std env with Spring boot !";
	}
}

2.2 Vuetify側

(1) axios のインストール

ajax ライブラリ axios をインストール

npm install axios --save

(2) Vuetify から axios を利用して、GAE(Spring Boot)のREST APIを呼び出す

<template>
  <v-container>
    <v-btn @click="sampleAjax">Ajax</v-btn>
  </v-container>
</template>
<script>
import axios from 'axios';

export default {
  name: 'FavPhrase',
  methods: {
    sampleAjax : function() {
      axios.get("http://localhost:8080/api/hello")
        .then((res) => {
          alert("status=" + res.status + ":" + res.data);
        });
    }
  }
}
</script>
<style>
</style>

と、以下のエラーとなる

localhost/:1 Access to XMLHttpRequest at ‘http://localhost:8080/api/hello’ from origin ‘http://localhost:8081′ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

2.3 クロスドメイン(CORS)対応

エラーメッセージ中の、CORS(Cross-Origin-Resource-Sharing)の対応を行う。

https://dev.classmethod.jp/etc/about-cors/

その概要は、クロスドメインアクセスされるサーバー側でアクセスを制御するルールを設定し、ブラウザとサーバー側でHTTPヘッダを使ってアクセス制御に関する情報をやりとりしながらドメインをまたいだアクセスをするというもの

(1) GAE(Spring Boot)側で対応を行う。

レスポンスヘッダーを返す

@RestController
public class ApiController {
	@GetMapping("/api/hello")
	public ResponseEntity hello(@RequestHeader("Origin") String origin) {
		System.out.println(origin);
		
		HttpHeaders headers = new HttpHeaders();
		headers.add("Access-Control-Allow-Origin", origin);
		
		String body = "Hello GAE Java std env with Spring boot !";
		return new ResponseEntity<>(body, headers, HttpStatus.OK );
	}
}