Svelte-kit 프록시 처리

https://binsblog.tistory.com/entry/Svelte-Get-Post

Svelte Get, Post

위 처럼 get을 하였을 때는 작동이 되나, post를 하였을 때 스프링 부트와 API 통신을 하면서 CORS에러가 생기는 경우가 있었다.

 

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(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true); //내 서버가 응답을 할 때 json을 자바스크립트에서 처리할 수 있게 할지를 설정하는 것
        config.addAllowedOrigin("*"); // 모든 ip에 응답을 허용하겠다.
        config.addAllowedHeader("*"); // 모든 header에 응답을 허용하겠다.
        config.addAllowedMethod("*"); // 모든 post, get, put, delete, patch 요청을 허용하겠다.
        source.registerCorsConfiguration("/api/**",config);
        return new CorsFilter(source);
    }
}

위와 같이 스프링 부트에서 설정하면 해결된다고 하였지만, bean이 중복되었다는 에러가 발생하였다.

해당 프로젝트에서는 이미 spring security가 설정되어 있고, 이는 수정이 불가능한 상태였다.

아직 security에 대한 지식이 없어 이는 더 공부해보고 백엔드에서 수정하는 방법을 알아보아야 한다.

 

따라서 프론트쪽에서 프록시를 설정하여 해결하였다.

vite.config.js에 위와 같이 프록시를 설정해준다.

import { sveltekit } from '@sveltejs/kit/vite';
/** @type {import('vite').UserConfig} */
const config = {
	plugins: [sveltekit()],
	server: {
		proxy: {
			'/api': {
				target: 스프링부트 서버 주소,
				changeOrigin: true,
				rewrite: (path) => path.replace(/^\/api/, ''),
				secure: false,
				wss: true
			},
		},
	}
};
export default config;

 그 후 post를 할 때 '/api/'를 붙여준다.

onMount(async()=>{
    let jsonStr = JSON.stringify({a:a,b:b});
    const url = '/api/포트번호 이후 주소';
    const res = await postAPI(url,jsonStr);
    let resData = await res.json();
});