스프링 CORS 설정

CorsFilterkmi.hc.hops.api.config.CorsFilterCorsFilter/*

Vue + 스프링(부트아님)으로 개발 테스트 중인데, cors 에러로 통신이 안되고 있었다.

 

Access to XMLHttpRequest at 'http://127.0.0.1:8081/user/login' from origin 'http://localhost:9000' 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 처리하는건, 임시 방편이기 때문에 백엔드에서 처리해주기로 했다.

 

1. web.xml에 filter 추가

	<filter>
		<filter-name>CorsFilter</filter-name>
		<filter-class>test.api.config.CorsFilter</filter-class>
	</filter>

	<filter-mapping>
		<filter-name>CorsFilter</filter-name>
		<url-pattern>/*</url-pattern> <!-- 모든 URL에 대해 필터 적용 -->
	</filter-mapping>

 

 

2. filter 추가

package test.api.config;

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CorsFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        // 초기화가 필요한 경우 여기에 작성
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;

        // CORS 헤더 추가
        res.setHeader("Access-Control-Allow-Origin", "http://localhost:9000"); // 허용할 도메인
        res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); // 허용할 HTTP 메서드
        res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization"); // 허용할 요청 헤더
        res.setHeader("Access-Control-Allow-Credentials", "true"); // 인증 정보 허용

        // 필터 체인을 통해 다음 필터로 이동
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {
        // 종료가 필요한 경우 여기에 작성
    }
}

 

 

이 부분이 핵심인데,

// CORS 헤더 추가
res.setHeader("Access-Control-Allow-Origin", "http://localhost:9000"); // 허용할 도메인
res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); // 허용할 HTTP 메서드
res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization"); // 허용할 요청 헤더
res.setHeader("Access-Control-Allow-Credentials", "true"); // 인증 정보 허용

 

허용할 도메인, 그리고 methos들을 작성해서 설정해주면 된다.