nodejs 서버와 클라이언트가 서로 다를경우 로그인 처리방법

nodejs 서버와 클라이언트가 서로 다를경우 로그인 처리방법입니다.

 

서버와 클라이언트의 주소가 서로 다른 경우, 주로 "크로스 오리진 리소스 공유" 또는 CORS (Cross-Origin Resource Sharing)를 관리해야 합니다. CORS 정책은 보안상의 이유로 브라우저에서 기본적으로 적용되며, 서로 다른 도메인에서 요청을 보낼 때 일부 보안 규칙을 준수해야 합니다.

아래는 일반적으로 서로 다른 도메인에서 로그인 처리를 구현하는 방법입니다.

1. 서버 측 CORS 설정 : 서버 측에서 CORS를 활성화하고 허용되는 원본(도메인)을 설정해야 합니다. 이를 통해 클라이언트 측에서 서버로의 요청을 허용하도록 합니다.

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

// CORS 미들웨어 사용
const cors = require('cors');
app.use(cors({
  origin: 'http://클라이언트도메인.com', // 클라이언트 도메인
  credentials: true, // 인증 정보를 함께 보낼 수 있도록 설정
}));

// 미들웨어 및 라우트 설정
// ...

// 서버 시작
const port = 3000;
app.listen(port, () => {
  console.log(`서버가 포트 ${port}에서 실행 중입니다.`);
});

 

2. 클라이언트 측에서 요청 전송 : 클라이언트 측에서는 요청을 보낼 때 CORS 요청 헤더를 설정해야 합니다. 주로 JavaScript로 Ajax 또는 Fetch API를 사용하여 요청을 보냅니다. 요청 헤더에는 withCredentials: true와 같이 인증 정보를 함께 보내도록 설정해야 합니다.

fetch('http://서버도메인.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    username: '사용자명',
    password: '비밀번호',
  }),
  credentials: 'include', // 인증 정보를 요청에 포함
})
.then((response) => {
  // 로그인 성공 또는 실패에 대한 처리
})
.catch((error) => {
  console.error('로그인 요청 오류:', error);
});

 

3. 서버에서 응답 처리 : 서버에서는 클라이언트로부터의 요청을 처리하고, 클라이언트에게 응답할 때 CORS 헤더를 설정해야 합니다. 이것은 이미 위에서 서버 측에서 설정한 부분입니다. 응답 헤더에는 Access-Control-Allow-Origin, Access-Control-Allow-Credentials 등의 헤더가 포함되어야 합니다.

// 로그인 요청을 처리하는 라우트 핸들러
app.post('/login', (req, res) => {
  // 로그인 로직 처리
  // ...

  // CORS 헤더 설정
  res.header('Access-Control-Allow-Origin', 'http://클라이언트도메인.com');
  res.header('Access-Control-Allow-Credentials', true);

  // 클라이언트에게 응답
  res.status(200).json({ message: '로그인 성공' });
});

위의 절차를 따르면 서로 다른 도메인 간에 로그인 처리를 할 수 있습니다. 주의해야 할 점은 보안 상의 이유로 CORS를 설정할 때 가능한 특정 도메인만 허용하는 것이 좋습니다. 또한, 인증 정보를 보내는 경우 credentials 설정을 활성화하고, SSL(HTTPS)을 사용하여 통신하는 것이 보안상 좋습니다.

 

app.js

app.use(cors({
  origin: "https://주소.com",
  credentials: true, // 응답 헤더에 Access-Control-Allow-Credentials 추가
  optionsSuccessStatus: 200, // 응답 상태 200으로 설정
}));