Vue + axios + Spring BootでCORSでクマった時の対処法

CORSエラーで絶対に躓かないために

CORSとは何か

正式名称は"Cross Origin Resource Sharing"
セキュリティの観点から、リソースを制限するものだと思います。
詳しくは、こちらの記事がより丁寧に説明してくれています。😆
https://qiita.com/att55/items/2154a8aad8bf1409db2b

実際の実装

axios側の設定😋

originには、postのparamsが含まれています。

import service from '../utils/service'

export const api = {
  async getRoute(origin) {
    return await service
      .post('http://localhost:8080/getRoute', origin, {
        withCredentials: true,
      })
      .then(result => {
        return result.data
      })
      .catch(result => {})
  },
}

serviceでは、axiosの設定そしています。

import axios from 'axios'
import { api } from '../config/api'

const service = axios.create({
  timeout: 30000,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
  },
  emulateJSON: true,
  withCredentials: true,
})

Vue側の設定😂

  methods: {
    async searchRoute() {
      const params = {
        origin: this.markers.marker[0].position,
        direction: this.direction,
      }
      const result = await api.getRoute(params)
    },

Vueのmethodsのところで呼び出します。

Spring Boot側での設定

私は、Springfilterを使ってnetworkのconfigを設定しました。
Vueはlocalhost:9000で動かしているので、9000を許可します。

CorsConfig.java

@Configuration
public class corsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowedOrigins(new ArrayList<>(Arrays.asList("http://localhost:9000")));
        config.setAllowCredentials(true);
        config.addAllowedMethod("*");
        config.addAllowedHeader("*");
        config.addExposedHeader("Set-Cookie");

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

        return new  CorsFilter(configSource);
    }
}

Controller.java

@CrossOrigin(origins = {"http://localhost:9000"})
@RestController
public class RouteController {

    @Autowired
    RouteManager routeManager;

    @PostMapping("/getRoute")
    public DirectionsResult sendGetRouteReq (@RequestBody GetRouteReq req) throws InterruptedException, ApiException, IOException {
        DirectionsResult result = routeManager.getRoute(req.getOrigin(), req.getDirection());
        return result;
    }
}

こんな感じで実装しました。
参考になりましたら幸いです。