React 如何使用前端Post方法串接電子地圖？

我們在串接綠界資訊的時候，遇到一個問題就是綠界的文件上寫，此方法要使用前端的post方法，但是我用call api的post方法去打，卻回應跨域錯誤，寫信綠問綠界，又一問三不知～

好在後來終於被後端工程師提醒才明白，在上古時期的網頁開發是沒有分前後端的，所以post方法都是用<form>標籤去做，我整個大開眼界欸，雖然還不懂這其中的差別，但總歸是成功了。

建立虛擬 input

因為我們是要在背景post，不是要在畫面上真正出現form表單，所以我們要先寫一段utils。

export const createHiddenInput = (form, name, value) => {
  const hiddenField = document.createElement('input');
  hiddenField.type = 'hidden';
  hiddenField.name = name;
  hiddenField.value = value;
  form.appendChild(hiddenField);
};

這段utils就是可以幫助我們不用真的在畫面上放進一個 <input /> 也可以傳參數到form裏面。

用 post 送出資料

現在我們要來創建post這個function，他的意思就是背景產生一個form表單，form本身可以有post方法使用，這就是綠界文件所說的「用前端的post方法」吧～

const handleGetStore = () => {
  const form = document.createElement("form");
  form.method = "POST";
  form.action = "https://logistics-stage.ecpay.com.tw/Express/map"; // 這是測試的網址，文件上會寫正式的是哪個網址
  createHiddenInput(form, "MerchantID", "XXXXX");
  createHiddenInput(form, "LogisticsType", "CVS");
  createHiddenInput(form, "LogisticsSubType", "XXX");
  createHiddenInput(form, "IsCollection", "Y");
  createHiddenInput(form, "ServerReplyURL", "選完門市後要回到哪一頁");
  document.body.appendChild(form);
  form.submit();
}

綠界的文件上都有測試的參數可以借你打，這樣你就至少可以進入畫面去選門市。

但這樣還沒結束，因為選完回來ServerReplyURL時，綠界會使用一樣post方式返回門市資訊給你。

接收綠界資料

這部分我後來是因為用的是next.js，直接在server.js多一個路由去接資料，所以可以拿到門市資料再重新導向到畫面頁。

const { createServer } = require("http");
const { parse } = require("url");
const next = require("next");
const port = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

// 上面省略，可以參考next.js官網
app.prepare().then(() => {
  createServer(async (req, res) => {
    const parsedUrl = parse(req.url, true);
    const { pathname, query } = parsedUrl;

    if (pathname === "你設定的綠界重導址"){
      let body = "";
      req.on("data", (chunk) => {
        body += chunk.toString(); // convert Buffer to string
      });
      req.on("end", () => {
        res.writeHead(302, {
          location: `/畫面真正要顯示門市資訊的地方${parsedUrl.search}&${body}`,
        });
        res.end();
      });
    }else{
      handle(req, res, parsedUrl);
    }
  }).listen(port, (err) => {
    if (err) throw err;
    console.log("ready - started server on url: https://localhost:" + port);
  });
});

裡面的parsedUrl.search是我們可以自己在你設定的綠界重導址上加上參數，是你自己用來判別的。

例如：https://myshop.com/ecRedirect?type=1 這邊的type:1就會被記錄在parsedUrl.search中。

而上面的body，就是綠界回傳門市資訊的地方，也就是說我們真正導到畫面的網址，後面接的query string會有我們自己帶的「加上」綠借給的門市資訊。

所以回傳會類似這樣： https://myshop.com/map?type=1&CVSStoreID=xxx&CVSStoreName=xxx...