react 使用前端Post方法串接電子地圖

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

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

因為我們是要在背景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這個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...

1+

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

加入Line立即聊聊:@539mjyid

0 回復

發表評論

想要加入討論嗎?
請盡情發表您的想法!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。