[TIL] 오늘의 개발일지

 

오늘 오후엔 세윤언냐랑 만나서 같이 미니 플젝을 준비했다

미니 플젝에서 회원가입을 구현하면서 써보고싶었던 리액트 훅폼을 사용해보았다 

확실히 state를 선언하지 않고, id값을 정하는 것으로 코드의 수를 확 줄여 가독성을 높이는 데 넘 좋겠다는 생각이 들었당

 

미니 플젝을 하면서 백엔드에 데이터를 요청하는 작업을 하는데, 언냐가 깃헙을 이용해서 REST API를 만드셧는데

서버랑 통신하는것까지는 성공했는데 데이터를 제대로 받지 못하는 CORS 에러가 발생했다

 

CORS 에러가 뭔지 같이 찾아보면서 발견한 짤인데, 이해하고 나니 웃긴 짤ㅋㅋㅋㅋㅋㅋ

 

이유?

같은 컴퓨터 내에서는 정상적으로 주고받아지지만, Origin이 다른 경우 CORS 에러를 돌려주는 것!!! 

* Origin? Protocol(Scheme), Host, Port

 

CORS 에러를 해결하기 위해선 백엔드에서 응답 헤더에 Access-Control-Allow-Origin를 추가해주어야 한다고 한당

 

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MyServlet extends HttpServlet {
  @Override
  protected void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setContentType("text/plain");
    response.getWriter().write("Hello World!");
  }
}

 

 

벗 이 코드를 설정해서 끝이 아니었고 우선 깃헙의 경우 정적인 페이지만 작동시켜주는 서버라서 못쓰게 된 것이라구 해따 ㅇㅅㅇ

블로그 마무리하고 쿠키 세션 정리 한번 하고 자야징

 

 

 

>> CORS에 대해 너무 잘 정리해주신 블로그 발견 ㅎㅅㅎ!! (정독하고 플젝 톡에 공유해야딍)

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏