문제

자바스크립트로 외부 서버 경로로 ajax 요청시 실패

Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3001' is therefore not allowed access. 
The response had HTTP status code 500.

원인

javascript 엔진 표준 스펙에 동일 출처 정책 보안 때문

동일출처 정책(Same-Origin Policy)

javascript 로 다른 웹페이지에 접근할 때는 같은 출처의 페이지만 접근이 가능하다.

요즘은 웹프로젝트가 여러 도메인에 걸쳐서 구성되므로 거추장 스러운 기술이 되었다.

그래서 만들어진 추가 정책이 CORS이다. 이는 서버에서 외부 요청을 허용할 경우 ajax요청이 가능하게 하는 방식이다.

CORS(Cross-Origin Resource Sharing)

웹브라우져에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 스펙 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반을할 지 결정하는 방식

OPTIONS 메서드로 요청을 미리 날려보고 요청을 할 수 있는 권한 있는지 확인한다.


// spring-boot example

@Component
public class CORSFilter extends OncePerRequestFilter {

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
        throws ServletException, IOException {
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE, OPTIONS");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers",
                "Authorization, Origin, X-Requested-With, Content-Type, Content-Disposition, Accept");
            response.setHeader("Access-Control-Expose-Headers", "Content-Disposition, filename");
            filterChain.doFilter(request, response);
    }
}

출처

javascript ajax 크로스 도메인 요청-CORS