[Sendbird를 활용한 웹 채팅] 6. 로그인 시행착오 (CORS, Failed to load resource: the server responed with a status of 404 (Not Found))

localhost가 아닌 실제 도메인 주소로 배포했을 때 발생했던 문제들

1. CORS 문제

편의상 로그인 API 주소를 https://www.chat.co.kr/login라 한다.

 

로컬에서 테스트

🔒 로그인 API 요청 시 CORS 문제 발생

axios
      .post(`https://www.chat.co.kr/login`, {
        id: userId,
        pw: userPw,
      })
      .then((res) => console.log(res));

 

🔑 package.json 설정 후 url 수정

1. package.json에 proxy 설정하기
2. { "proxy": "https://www.chat.co.kr", }
3. 요청 url 변경하기
4. axios .post(`/login`, { id: userId, pw: userPw, }) .then((res) => console.log(res));

 

서버에서 테스트

🔒 서버에서 로그인 API 동작 안됨 (서버에서 API의 경로를 인식하지 못함)
cors문제를 해결하기 위해 package.json 옵션에 proxy를 설정해 준 것은 로컬에서만 해결된 것이였다. 서버에 배포를 하게 되면, 로컬의 webpack 위에서 돌아가는 것이 아닌 것이 되므로 근본적인 문제의 해결책이 아니였던 것이다(임시방편이었던 것..). cors 문제의 해결 방법은 여러 가지가 있지만 일반적으로 서버에서 해결하는 것이 좋은 방법이다.

 

 

🔑 서버에서 다음과 같은 설정을 추가해주면 된다.

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: *

이렇게 하면 클라이언트에서 package.json에 proxy설정을 해주지 않아도 괜찮다.

 

2. Failed to load resource: the server responed with a status of 404 (Not Found)

🔒 배포 후 로그인 버튼 클릭 시 에러 발생

• 리액트 프로젝트를 배포하는 과정에서 일어난 문제다.
• 리액트는 SPA이기 때문에 사용자가 어떤 페이지를 방문하던 상관없이 index.html을 가리켜야 한다.
• 참고: https://github.com/facebook/create-react-app/blob/main/docusaurus/docs/deployment.md#serving-apps-with-client-side-routing

 

🔑 public/.htaccess 파일에 아래 내용을 작성 후 빌드하면 된다.

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

 

3. 로그인 화면