経緯

Vue.js と SpringBoot を用いて SPA 開発をしていたところ、API が叩けない問題が発生しました。

Postman 等のツールで API を確認すると Spring は正常に機能しているのに、いざ Vue や React から API を叩こうとするとエラーが出てしまう状況でした。

そこでフロントとバックエンドの接続から、値の受け渡しができるまでを記述していこうと思います。

結論

結局の所、SpringBoot 側の問題でした。

具体的には、他のプログラムからは接続できないようにセキュリティがかかっているとのこと。

そこで今回は、指定した URL からは API を叩けるように指定していく。

Docker コンテナ間でも接続確認できました。

SpringBoot の記述

今回は、

Vue から { email: ○○, password: ☓☓ } を送信し、Spring で受信内容を出力
Spring から { result: OK } を返却する

ディレクトリ構成

app
├src/main/java/com/example
|                   ├ controller - SampleController.java
|                   ├ form       - LoginForm.java
|                   └ common     - CorsConfig.java
└ build ...

SampleController.java

SampleController.java

package com.example.controller;

import java.util.HashMap;
import java.util.Map;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.form.LoginForm;

@RestController
@RequestMapping("/user")
public class SampleController {

    @PostMapping("/login")
    public Map<String, String> login(@RequestBody LoginForm form) {
        System.out.println(form);
        Map<String, String> sample = new HashMap<>();
        sample.put("result", "OK");
        return sample;
    }

}

CorsConfig.java

CorsConfig.java

package com.example.common;

import java.util.Arrays;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowedOrigins(Arrays.asList("http://localhost:8081")); // アクセス許可するURL
        config.setAllowCredentials(true);
        config.addAllowedMethod("*");
        config.addAllowedHeader("*");
        config.addExposedHeader("Set-Cookie");

        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        return new CorsFilter(configSource);
    }

}

起動してみる

Vue - SpringBoot 間で値の受け渡しができました。

最後に

今回はローカル環境上で CORS エラーを解決できましたが、Docker を使ったコンテナ間でのやり取りはまだ CORS エラーが出たままとなっているので、次は Docker 環境上でも機能する仕様にしていきたいと思います。