IonicからSpring Webアプリケーションにアクセスしたい

Question

ionicとJavaを勉強しているものです。

▼開発環境
・Windows PC：
ionicを実装

・Mac PC:
STS(Spring Tool Suite)でWebアプリケーション実装
DockerでUbuntuを起動してionicからリクエストを受け付ける

動作確認のために以下のように実装しました。

import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
   constructor(
       private httpClient: HttpClient,
   ) {
      this.initializeApp();
   }

   initializeApp() {
          this.httpClient.post("http://XXX.XXX.X.X:8080/getToken", {},{
              headers : new HttpHeaders({
                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/json',
                'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT',
                'Accept': 'application/json',
                'content-type': 'application/json'
              })
            })
            .subscribe((response) => {
              console.log("レスポンス結果：" + JSON.stringify(response));
            })
   }
}

docker-compose.yml

version: '3'
  
services:
  #ubuntu
  app:
    image: ubuntu
    command: /bin/bash
    tty: true
    ports:
      - "127.0.0.1:8100:8100"
      - "127.0.0.1:8080:8080"
    expose:
      - "8100"
      - "8080"

  # MySQL
  db:
    image: mysql:5.7
    container_name: mysql_host
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: sample_db
      MYSQL_USER: admin
      MYSQL_PASSWORD: password
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
    volumes:
    - ./docker/db/data:/var/lib/mysql
    - ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf
    - ./docker/db/sql:/docker-entrypoint-initdb.d
    ports:
    - 3306:3306
    build:
      context: .
      dockerfile: Dockerfile1

@Controller
public class UserController {
	@RequestMapping(value = "/getToken", method = RequestMethod.POST, produces="application/json; charset=UTF-8")
	public ResponseEntity<Object> getToken(HttpServletRequest request, CsrfToken token) {
        // リクエストを受け付けられるかを確認する
		System.out.println("取得したトークン" + token.getToken());
		return new ResponseEntity<>("{}", HttpStatus.OK);
	}
}

@Configuration
@EnableWebSecurity
public class AppSecurityConfig  extends WebSecurityConfigurerAdapter {
	@Override
	protected void configure(HttpSecurity http) throws Exception {
		// URLアクセス設定
		http.authorizeRequests().mvcMatchers("/getToken").permitAll()
		.and().cors().configurationSource(this.corsConfigurationSource());
	}
	@Bean
	public org.springframework.web.cors.CorsConfigurationSource corsConfigurationSource() {
		CorsConfiguration configuration = new CorsConfiguration();
		configuration.setAllowCredentials(true);
		configuration.setAllowedOrigins(Arrays.asList("http-nio-XXX.XXX.X.X-8080", "http-nio-XXX.XXX.X.X-8100"));
		configuration.setAllowedHeaders(Arrays.asList(
				"Access-Control-Allow-Headers",
				"Access-Control-Allow-Origin",
				"Access-Control-Request-Method",
				"Access-Control-Request-Headers",
				"Cache-Control",
				"Content-Type",
				"Accept-Language"));
		configuration.setAllowedMethods(Arrays.asList("GET", "POST"));

		org.springframework.web.cors.UrlBasedCorsConfigurationSource source = new org.springframework.web.cors.UrlBasedCorsConfigurationSource();
		source.registerCorsConfiguration("/**", configuration);
		return source;
	}

}

【動作確認手順】
①STSを起動する。(ionicからのリクエストを待つ)
②Dockerを起動する(外部アクセスを許可)
③ng serveでアプリ起動

ionicを起動してリクエストを実行したところ以下のエラーとなってしまいました。
Access to XMLHttpRequest at 'http://XXX.XXX.X.X:8080/getToken' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORSについて調べてみたのですが、なかなか解決ができません。
アクセス許可設定についてお詳しい方がいましたらご回答いただけないでしょうか？

Answer 1

getTokenメソッドに@CrossOriginアノテーションを付与したところ解決できました。

Answer 2

動作確認ができていませんので見当違いかもしれませんが、CORSの登録がうまくいっていないようです。

• HttpSecurityにてcors()を指定
• UrlBasedCorsConfigurationSourceのregisterCorsConfigurationが必要

https://spring.pleiades.io/spring-security/site/docs/5.0.19.BUILD-SNAPSHOT/reference/html/cors.html

@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

	@Override
	protected void configure(HttpSecurity http) throws Exception {
		http.cors().and()  // cors() を宣言
			...
	}

	@Bean
	CorsConfigurationSource corsConfigurationSource() {
		CorsConfiguration configuration = new CorsConfiguration();
		configuration.setAllowedOrigins(Arrays.asList("https://example.com"));
		configuration.setAllowedMethods(Arrays.asList("GET","POST"));
		UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
		source.registerCorsConfiguration("/**", configuration);  // CORS設定を登録、が抜けているかも知れません。
		return source;
	}

Comments

[Linkey]

回答ありがとうございます。試してみましたがエラーは変わりませんでした。dockerの中身を変えてみたりいろいろ試しています。