React 리액트 CORS 에러 해결방법

에러 내용

Access to XMLHttpRequest at 'http://localhost:8081/member/login' from origin 'http://localhost:3000' 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 policy 정책 때문에 접근 할 수 없다.( 보안상 문제 )

교차 출처 리소스 공유 ( Cross-origin resource sharing )

 

---

리액트 서버의 포트 번호는 3000이다

스프링 서버의 포트 번호는 80 or 8080(사용자설정에 따라 다름)이다.

 

보내는 요청 URL과 받는 응답 URL이 다르면 CORS 정책에 위반된다.

때문에 배포시 서버를 통합시켜줘야한다.

 

---

임시 해결 방법

 

요청을 보낸 url과 응답을 받을 url을 일치 시켜줘야한다.

스프링 Controller 클래스에 어노테이션을 추가해준다.

@CrossOrigin("http://localhost:3000")

밑에는 예시이다.

@RestController // 컨트롤러는 스프링컨테이너(스프링 관리하는 메모리 공간 ) 빈 (객체)를 등록한다
@RequestMapping("/member") // 클래스 매핑
@CrossOrigin("http://localhost:3000") // 교차 리소스 공유
public class MemberController {
    // Controller -> Service 요청
    // Controller -> Service 응답
    @Autowired
    private MemberService memberService;

    // 1. C 회원가입
    @PostMapping("/post") //http://localhost:8081/member/post
   public boolean postMember(@RequestBody MemberDto memberDto){
       boolean result = memberService.postMember(memberDto);
       return result;
   }
}

 

교차 리소스 공유 

 

그 뒤 서버를 다시 키고 확인해본다.