리액트 CORS 에러처리

CORS : Cross-Origin Resource Sharing

 

리액트로 웹을 조금이라도 만들다보면 분명히 만나는 오류다.

 

서버에서(nodejs가정) npm i cors 설치해서 피하는 방법이라고 있긴한데 이것도 왠만하면 안하는게 좋다.

 

CORS를 안쓰기 위해서 리액트에서 post 요청을 할 때마다 body에 json을 담아 보내지 못한다.

 

Content-Type: application/json 을 못쓰기 때문이다. 

 

MDN 공식 홈페이지를 보면 이런 내용이 있다.

 

application/json은 사용가능 미디어타입에 없다!

 

보통 json 형태가 가독성도 좋고 해석하는데도 깔끔한데 이것이 금지되서 번거롭긴하지만

 

꼭 필요한 경우가 아니라면 CORS 정책을 지키는것이 좋다. 

 

참고 : Cross-Origin Resource Sharing (CORS) - HTTP | MDN (mozilla.org)

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

 

그런데 또,

 

리액트 -> 서버로 요청하는게 CORS 정책에 위반이라는거지

 

서버 -> 리액트로 응답하는 내용은 application/json 은 아무런 상관이 없다.

 

-> CORS 정책 위반 내용은 브라우저에서 발생하는 것이라서 그렇다. (postman, RESTer) 같은 것은 

    같은 요청을해도 CORS 오류가 나지 않는다.

 

무슨 내용이든 json으로 오면 처리가 쉬우니 

 

const requestOptions = {
      method: "GET",

      headers: {
        Accept: "application/json"............. 쭉

}

 

이렇게 적어서 응답은 json으로 받아서 처리해도 무방하다.