[CORS] 해결 (Proxy Pattern)

 

# 문제

javascript로 다른 도메인 호출시 Cross Origin Resource Sharing 에러가 나옴 줄여서 CORS

const requestData = (query) => {
   return new Promise((resolve, reject) => {
      const formData = new FormData();
      formData.append('query', query);
      fetch('다른 도메인 호출 api', {
         method: 'POST',
         body: formData,
         cache: 'no-cache', 
      })
      .then(response => response.json())
      .then(data => {
         resolve(data);
      })
      .catch(error => {
         //console.log('Error: ', error);
      });
   });
}

 

페이지에서 네트워크 log를 통해 보면 아래와 같이 나옴.

 

서로 다른 도메인이  직접적으로 호출하게 되어 충돌해서 그럼.

 

# 해결 :

@Configuration
public class WebConfig implements WebMvcConfigurer {

   @Override
   public void addCorsMappings(CorsRegistry registry) {
      registry.addMapping("/api/proxy/**")
            .allowedOrigins("*")
            .allowedMethods("*");
   }
   
}

 

@RestController
@RequestMapping("/api/proxy")
@RequiredArgsConstructor
public class ProxyController {
   @PostMapping("/oraql")
    public ResponseEntity<String> proxyRequest(@RequestParam("query") String query) {
        RestTemplate restTemplate = new RestTemplate();
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.MULTIPART_FORM_DATA);

        MultiValueMap<String, String> body = new LinkedMultiValueMap<>();
        body.add("query", query);

        HttpEntity<MultiValueMap<String, String>> requestEntity = new HttpEntity<>(body, headers);

        String url = "호출할 도메인 api url명";

        ResponseEntity<String> response = restTemplate.exchange(
            url, HttpMethod.POST, requestEntity, String.class);

        return ResponseEntity.status(response.getStatusCode()).body(response.getBody());
    }
}

 

const requestData = (query) => {
    return new Promise((resolve, reject) => {
        const formData = new FormData();
        formData.append('query', query);
        fetch('/api/proxy/oraql', {
            method: 'POST',
            body: formData,
            cache: 'no-cache',
        })
        .then(response => response.json())
        .then(data => {
            resolve(data);
        })
        .catch(error => {
            console.log('Error: ', error);
            reject(error);
        });
    });
}

 

하면 CORS 오류 없이 해결된다.

 

 

# 결론

CORS 문제는 클라이언트가 외부 도메인으로 직접 요청을 보내면서 발생하지만,

서버가 중간에서 프록시 역할을 하면 같은 도메인 내에서만 요청을 처리하므로 CORS 문제를 우회가 가능함.

=> 이것이 서버에서 프록시 패턴으로 처리하면 해결되는 이유.