(추가중)😱맨날 마주치는 blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

정말 프로젝트해볼 때 맨날 봤던 이슈다. 그치만 맨날 찾아본다. 그래서 이번엔 정리해본다^^..

 

상황

8080번 포트에서 실행 중인 프론트가 8081번 포트에서 실행 중인 서버로 게시물을 작성해 POST 요청을 보냈다.

이슈분석 그리고 원인

예상은 했지만, 안나오길 바랬던 이슈가 나타났다. 바로 CORS 에러이다. 저번에는 S3에 저장된 이미지를 캔버스에서 활용할 때 비슷한 문제가 나타났다. 정말 많이 봤다.

 

CORS가 무엇인지 잠시 살펴보면 좋을 것 같다.

 

CORS가 뭔데?

 

 

해결방법

package com.web.backend.controller;

import com.web.backend.dto.PostSaveRequestDto;
import com.web.backend.dto.PostsResponseDto;
import com.web.backend.service.PostsService;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RequiredArgsConstructor
@RequestMapping("/api/v1/posts")
@RestController
public class PostsController {

    private final PostsService postsService;

    @CrossOrigin(origins = "http://localhost:8080")
    @PostMapping("")
    private Long savePost(@RequestBody PostSaveRequestDto postSaveRequestDto) {
        return postsService.save(postSaveRequestDto);
    }

}

다양한 방법이 있다. Proxy Server를 이용하거나, http-middleware-proxy-server..? 였나? 이것도 이용한 적이 있었다.

 

일단 내가 사용한 방법에 대해서만 작성해보겠다.(나머지는 천천히 추가해야지!)

1) @CrossOrigin 어노테이션을 사용하여 프론트에서 오는 요청에 대해서 CORS를 허용하도록 했다.

 

배운점/ 궁금한 점

궁금한 것이 생겼다. 서버에서 해당 도메인+포트에 대해서 CORS를 허용하는 방식을 선택했는데, 이게 괜찮은 것일까? 일단 모든 도메인에 대해서 허용한 것이 아니기 때문에 괜찮지 않을까? 하는 생각에 다음과 같은 방법을 선택했다. 잘 모르겠다. 보안 상의 이슈는 없을까?! 어떻게 해야 더 좋은 방법인지 찾아보고 추가해보겠다. 실제 업무에서는 어떻게 해결할까 궁금해졌다. 🤯