브라우저에서 요청을 보내기, JavaScript로 요청을 보내기

서버 테스트 중 redirect가 동작하지 않는 문제가 발생했다.

import { ServerPropsType } from "@/src/type/types";
import { connectDB } from "@/src/util/database";

const handler = async (...[req, res]: ServerPropsType) => {
  if (req.method === "POST") {
    return res.status(200).redirect("/");
  }
};

export default handler;

클라이언트에서 POST요청이 오면 200상태코드와 함께 메인페이지로 리다이렉트 되는 테스트 코드를 만들었다. 하지만 상태코드는 들어오지만 redirect가 동작하지 않는 문제가 발생되었다.

브라우저에서 요청, JS로 요청

위의 문제는 클라이언트에서 서버로 요청을 보내는 주체에 따라 redirect가 작동하고 안하고 차이가 있다.

브라우저에서 요청을 보내는 경우

웹 페이지에서 어떤 동작을 수행할 때 발생한다. 예시로 사용자가 링크를 클릭하거나, HTML from을 제출하는 경우이다. 이런경우 브라우저가 직접 서버에 요청을 보내고 서버에서 전달된 응답을 바탕으로 새로운 페이지를 로드하거나 현재 페이지를 업데이트 한다.

JavaScript로 요청을 보내는 경우

웹 페이지의 JavaScript 코드가 실행되면서 발생한다. 예시로 fetch() 함수나 axios 같은 HTTP 클라이언트 라이브러리를 사용하여 비동기적으로 데이터를 요청하는 경우가 있다. 이런 경우 JavaScript가 서버에 요청을 보내고 응답을 받아 처리합니다.

두 방식의 차이점

1. 브라우저 요청은 페이지 전체를 새로고침한다. 반면 JavaScript 요청은 페이지의 일부만 업데이트할 수 있다.
2. 브라우저 요청은 서버에서 리다이렉트를 자동으로 따른다. 하지만 JavaScript 요청은 리다이렉트 응답을 받아도 자동으로 리다이렉트하지 않습는다. 이 경우 JavaScript에서 리다이렉트를 처리해야 한다.
3. JavaScript 요청은 복잡한 요청을 보낼 수 있다. 예시로 헤더를 커스터마이즈하거나 JSON 데이터를 보내거나, 다양한 HTTP 메소드(GET, POST, PUT, DELETE 등)를 사용할 수 있다. 반면 브라우저 요청은 주로 GET(링크 클릭) 또는 POST(폼 제출) 요청을 보냅니다.