[node js] CORS 에러 해결 방법 example [Multi host 사용하기]

CORS 에러 해결 방법 example [Multi host 사용하기]

---

이슈 발생상태

nodejs 로 express 를 사용하여 REST API 를 만들었다.

동작확인 중 외부 front web app 에서 ajax call 시 CORS 에러가 발생하였다.

서칭을 해보니 몇가지 방법이 있어 참고용으로 남긴다

---

1. res.header에 "Access-Control-Allow-Origin" 을 명시적으로 사용.

8라인에서 localhost:8081 정보를 허용하는 것을 명시적으로 입력하였다.

[보안 주의] 9라인 처럼 * 을 사용하는 경우 모든 Host 를 허용하게 된다.

const app = express();
 
app.all('/*', function(req, res, next) {
 
  logger.debug("Access-Control-Allow-Origin~~~~~~");
 
  res.header("Access-Control-Allow-Origin", "http://localhost:8081");
 
  // res.header("Access-Control-Allow-Origin", "*");
 
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
 
  next();
 
});
 
 
 
// 위코드 아래에 REST api router 를 선언해야 된다.
 
app.use('/xxxx/test/v1', router_xxxxx);

---

2. 다중 host 추가방법

위방법은 단일 host 만 가능하다. 

REST API 를 여러곳에서 사용하기 위하여는 다른 방법이 필요하여 다시 검색.

아래 방법을 찾아 동작 상태를 확인하였다.

app.all('/*', function(req, res, next) {
 
  logger.debug("Access-Control-Allow-Origin~~~~~~");
 
  const allowedOrigins = ['http://localhost:8081', 'http://test11111:8082']; // CORS 허용할 도메인 목록 
  const origin = req.headers.origin; 
 
  res.setHeader('Content-Type', 'application/json; charset="utf-8"'); // CORS 허용 
 
  if(allowedOrigins.indexOf(origin) > -1) { // 
    res.setHeader('Access-Control-Allow-Origin', origin); 
  } 
 
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); 
  res.setHeader('Access-Control-Max-Age', '3600'); 
  res.setHeader('Access-Control-Allow-Headers', 'Origin, Accept, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers');
 
  next();
 
});

Method 허용하려는 것을 여러개 넣고,

max-age : 다른 preflight request를 보내지 않고, preflight request에 대한 응답을 캐시할 수 있는 시간(초)을 제공합니다. 위의 코드는 86400 초(24시간) 입니다. 각 브라우저의 최대 캐싱 시간 은 Access-Control-Max-Age 가 클수록 우선순위가 높습니다.

---

REF Site

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS