CORS를 만나다(feat. 404 NOT FOUND)

지난 주말 WIL 키워드가 CORS였는데 마치 짠 것처럼 오늘 관련 이슈가 터졌다.

 

에러 메세지

// error
access to XMLHttpRequest at 'http://43.201.106.25/api/signup' 
from origin 'http://localhost:3001' 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 개념 정리

WIL_CORS

 

백엔드는 1차 기능 구현이 완료되어 우선 배포를하고 프론트엔드는

배포된 서버를 이용해서 로컬환경에서 테스트를 진행하며 개발을 진행하고 있는 상황이었다.

그런데 클라이언트에서 서버에 요청을 보냈을 때 CORS 에러가 터진 것이다.

CORS는 명시되어 있지 않은 호스트와 통신하는 것을 막는 것이기 때문에

서버 쪽에서 그에 대한 설정이 필요했다.

CORS 설정을 간편하게 할 수 있도록 도와주는 미들웨어가 있어 적용해 보았다.

 

cors 미들웨어 설치

npm install cors

 

app.js 코드 추가

const express = require('express')
const cors = require('cors');

const app = express();

app.use(cors({
    origin: true, // 출처 허용 옵션
    credentials: true // 사용자 인증이 필요한 리소스(쿠키 ..등) 접근
}));

 

 

위와 같이 서버쪽에서 cors의 credentials 옵션을 true로 해주었다면 프론트쪽에서도

api에 요청을 할 때 아래와 같이 옵션 설정을 해주어야 한다.

// axios 옵션 객체로 넣기
axios.post(
    'https://example.com:1234/users/login', 
    { profile: { username: username, password: password } }, 
    { withCredentials: true }
).then(response => { 
    console.log(response); 
    console.log(response.data); 
})

이번 프로젝트의 프론트에서 사용하는 통신 방식인 axios로 예를 들었다.

 

오늘 오전에 에러가 터졌을 때 해결 방법을 검색 후 생각보다 간단해서 시도를해보았으나 실패했다.....

그래서 다른 방법들을 시도했다.

 

1. proxy 미들웨어 설치하여 src/setupProxy.js 파일에 proxy 설정

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

 => 실패

2. 백엔드 app.js 파일에

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3001'); // 클라이언트 주소
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); // 허용되는 메서드
  res.header('Access-Control-Allow-Headers', 'Content-Type'); // 요청 헤더
  next();
});

위와 같이 설정 => 실패

 

3. 백엔드 app.js 파일에

const express = require('express')
const cors = require('cors');

const app = express();

app.use(cors({
    origin: '*', // 모든 출처 허용 옵션. true 를 써도 된다.
}));

위와 같이 설정 => 실패

 

4. 3번과 같은 코드에 credentials: true 옵션 추가
(프론트에서도 요청 시 같은 조건 설정) => 실패

 

처음엔 금방 해결될 줄 알았는데 모든 팀원이 오늘 하루종일 매달렸음에도 불구하고 결국 해결하지 못했다.

지금도 해결 방법을 계속 찾는 중이지만 아무래도 날이 밝으면 도움 요청을 해야할 것 같다.