Node JS - 요청한 원래 URL로 리다이렉션하기 (Redirect Back to Original URL)

리액트 전체 링크

Node JS 전체 링크

 

참고

- 리액트 라우터 react router

- POST 방식으로 서버에 폼 데이터 전송하기

- POST로 데이터 전송 받기

 

React에서 POST 방식으로 서버에 폼을 전송한 후, 다시 원래의 URL로 리다이렉션이 되도록 해보자.

위의 링크의 리액트 코드를 리액트 라우터가 있는 곳에 추가하였다.

import { Route, Link, Routes } from "react-router-dom";

import "./App.css";

import ButtonTest from "./page/ButtonTest";
import MaterialTable from "./page/MaterialTable";
import TreeViewExample from "./page/TreeViewExample";
import TreeViewExample2 from "./page/TreeViewExample2";
import { useEffect, useState } from "react";
import FileBrowser from "./page/FileBrowser";
import MyAutoComplete from "./page/MyAutoComplete";
import TextAreaWithLineNumber from "./page/TextAreaWithLineNumber";

const useTitle = (initialTitle) => {
  const [title, setTitle] = useState(initialTitle);
  const updateTitle = () => {
    const htmlTitle = document.querySelector("title");
    htmlTitle.innerText = title;
  };
  useEffect(updateTitle, [title]);
  return setTitle;
};

const submit = () => {
  const form = document.createElement("form");
  const input1 = document.createElement("input");
  const input2 = document.createElement("input");

  form.method = "post";
  form.action = "http://192.168.55.120:3002";

  input1.type = "hidden";
  input2.type = "hidden";

  input1.setAttribute("name", "id");
  input1.setAttribute("value", "blood");

  input2.name = "password";
  input2.value = "straw";

  form.appendChild(input1);
  form.appendChild(input2);

  document.body.appendChild(form);
  form.submit();
  document.body.removeChild(form);
};

function App() {
  const titleUpdator = useTitle("Loading...");
  setTimeout(() => titleUpdator("Home"), 1000);

  return (
    <div className="App">
      <div className="router">
        <span>
          <Link to="/btn">Button Test</Link>
        </span>
        <span>
          <Link to="/mtable">Material Table</Link>
        </span>
        <span>
          <Link to="/tvexp">Tree View</Link>
        </span>
        <span>
          <Link to="/tvexp2">Tree View 2</Link>
        </span>
        <span>
          <Link to="/fileBrowser">FileBrowser</Link>
        </span>
        <span>
          <Link to="/autoComplete">Auto Complete</Link>
        </span>
        <span>
          <Link to="/textAreaLineNumber">Text Area #</Link>
        </span>
      </div>
      <div>
        <button onClick={submit}>js submit</button>
        <Routes>
          <Route path="/btn" element={<ButtonTest />} />
          <Route path="/mtable" element={<MaterialTable />} />
          <Route path="/tvexp" element={<TreeViewExample />} />
          <Route path="/tvexp2" element={<TreeViewExample2 />} />
          <Route path="/fileBrowser" element={<FileBrowser />} />
          <Route path="/autoComplete" element={<MyAutoComplete />} />
          <Route
            path="/textAreaLineNumber"
            element={<TextAreaWithLineNumber />}
          />
        </Routes>
      </div>
    </div>
  );
}

export default App;

 

원래의 라우터로 돌아오는 것이 목표이기 때문에 window.location.href를 post 방식으로 보내자.

window.location.href에는 현재 라우터를 포함한 URL 정보를 가지고 있다.

  const urlInput =  document.createElement("input");

  urlInput.type = "hidden";
  urlInput.setAttribute("name", "redirURL");
  urlInput.setAttribute("value", `${window.location.href}`);
  form.appendChild(urlInput);

 

Node JS는 링크를 참고하여 아래와 같이 코드를 수정하면 된다.

redirURL 정보가 들어오면 res.redirect로 다시 리다이렉션 하였다.

const express = require("express");
const app = express();
const qs = require("querystring");

const cors = require("cors");
app.use(cors());

app.get("/", (req, res) => {
  console.log("get!");
});

app.post("/", (req, res) => {
  console.log("post!");

  let body = "";
  req.on("data", function (data) {
    body = body + data;
  });

  req.on("end", function() {
    let postInfo = qs.parse(body);
    let redirURL = postInfo.redirURL;
    
    console.log(postInfo);

    res.redirect(redirURL);
  })

  //res.send({message : "post!!"});
});

app.listen(3002, () =>
  console.log("Node.js Server is running on port 3002...")
);

 

 

라우터의 URL이 그대로 전송되고 다시 원래 URL로 리다이렉션 되는 것을 알 수 있다.