[TIL] Front-Back 연결 trouble shooting and solution - corsheaders, CORS_ALLOWED_ORIGINS

Backend와 Frontend 연결을 하는 대망의 날이 왔다. 그런데 당연히 처음부터 연결에 애를 먹었다. url 불일치부터, view를 post로 작성하지 못했던것, view에 response가 없었던 것, frontend 의 .env 에 localhost가 아니라 127.0.0.1로 url을 설정해야 했던 것, 백엔드 settings.py 에 CORS_ALLOWED_ORIGIN 설정을 해줘야 하는 것들 등 여러가지가 있었고, 결국 해결했다!

 

다음은 우리의 trouble shooting에 대한 solution들이다.

1. cors headers setting: middleware 순서를 맞춰야 함
       "corsheaders.middleware.CorsMiddleware",
       'django.middleware.common.CommonMiddleware',
   둘다 최상단이어야함. 우리는 commonmiddlewarer가 아랫줄에 있었는데, 파이썬은 순서가 중요하기 때문에... commonmiddleware를 위로 끄집어 냈다.
   
   
2. CORS_ALLOWED_ORIGINS = [
       "http://127.0.0.1:3000",
       "http://localhost:3000",
   ]
   을 setting에 올려놓아야 함. 우리는 front는 localhost로 연결되고, back은 127~로 연결되어서 둘다 적어주었다.
   안하면 생기는 오류: Failed to load resource: Origin http://127.0.0.1:3000 is not allowed by Access-Control-Allow-Origin. Status code: 200
   
   
3. views.py 에 Loginview 가 있어야했다 (백에서는 get으로 소통할거라 생각, 프런트에서는 post로 소통할거라 생각. 백과 프런트가 서로 뭘로 소통할지 커뮤니케이션이 잘 되어야 한다.)
   
   
4. 프런트는 localhost로 서버를 켜고, 백은 127.0.0.1 로 켰기 때문에 연결이 잘 안되었었음. 둘다 url 잘 확인해야함. 프런트 login.jsx 에서 url 마지막에 /까지 꼭 잊지 말고 작성해야 연결이 되었다.

console.log(
      `${process.env.REACT_APP_SERVICE_URL}:${process.env.REACT_APP_BACKEND_PORT}/accounts/token/`,
    );
    try {
      // .env를 바탕으로 backend 상대경로를 지정
      const response = await axios.post(
        `${process.env.REACT_APP_SERVICE_URL}:${process.env.REACT_APP_BACKEND_PORT}/accounts/token/`,
        {
          email: email,
          password: password,
        },
      );

 

빨간줄만 죽죽 긋다가 민트색 리프레시 토큰 나오면 다들 소리질러!!!!!!