No 'Access-Control-Allow-Origin' header is present on the requested resource. (CORS policy)

 

 

frontend(Vue.js), backend(Spring boot-Java)로 나눠진 환경에서 frontend쪽에서는 backend환경

 

 

에 rest api 형태로 값을 주고 받는 환경에서 아래와 같은 에러가 발생.

 

 

 

 

현재 다른 도메인의 서버에 url요청을 할 경우 XMLHttpRequest는 보안상의 이유로 자신과 동일한 도메인으로만 HTTP요청을 보내도록 제한하고 있어 에러가 발생한다.

결론은 XMLHttpRequest가 cross-domain을 요청할 수 있도록하는 방법인 CORS를 활용한다.

 

CORS(Cross-origin resource sharing)이란,

 - 웹 페이지의 제한된 자원을 외부 도메인에서 접근을 허용해주는 메커니즘이다.

 

 

 

Spring에서 설정

스프링 RESTful Service에서 CORS를 설정은 @CrossOrigin 어노테이션을 사용하여 간단히 해결 할 수 있다. RestController를 사용한 클래스 자체에 적용할 수 도 있고, 특정 REST API method에도 설정 가능하다. 또한, 특정 도메인만 접속을 허용할 수도 있다.

 

 

@CrossOrigin(origins = "허용주소:포트")

 

 

 

실제 사용 예제를 보면 아래와 같다.

package com.example.demo;

import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.*;

import java.time.LocalDateTime;
import java.util.HashMap;
import java.util.Map;

@Slf4j
@RestController
/*@CrossOrigin(origins = {"http://localhost:18080", "http://localhost:8180" })*/
@CrossOrigin(origins = "http://localhost:8080")
@RequestMapping("/api/test")
public class TestController {

    @GetMapping("/")
    public Header testCallInfo(){
        return (Header)Header.builder()
                .transactionTime(LocalDateTime.now())
                .resultCode("OK")
                .description("OK")
                //.data(returnData)
                .build();
    }


}