今天跟著 TDX 的串接說明文（TDX運輸資料流通服務API介接範例程式碼說明）試圖串一串 TDX API

TDX 官方有提供 Ajax 的串接範例（Sample.js）

415 錯誤提醒我 要注意後端的格式需求

而我這次想用 axios 接接看，沒想到光是第一步試圖用 axios 取得 TDX 的 Access Token 時，就一直 post 失敗，被後端發 415 error 卡，查了 415 相關說明與其他同伴的案例後，大概知道是我傳給後端的資料格式不符導致的

很多人的 415 都是在檢查開發工具中的 Network，看看 Response Headers 與 Request Headers 的 content type 有沒有一致，我怎麼檢查都很一致啊，都是 content-type: application/json

拿頭砸電腦後，重看了看 TDX 的取得取得 Access Token 說明（取得取得Access Token）
再換拿電腦砸了頭以後，發現說明中寫了這幾行

curl --request POST \
     --url 'https://tdx.transportdata.tw/auth/realms/TDXConnect/protocol/openid-connect/token' \
     --header 'content-type: application/x-www-form-urlencoded' \
     --data grant_type=client_credentials \
     --data client_id=YOUR_CLIENT_ID \
     --data client_secret=YOUR_CLIENT_SECRET \

重點是其中的這一行

--header 'content-type: application/x-www-form-urlencoded' \

原來 TDX 後端想要的事這種 content-type
看來 415 錯誤不是看 Response Headers 與 Request Headers 的 type 有沒有一致

看來 415 是在提醒我要注意後端的需求，揪竟後端要我 Request 什麼 type
果然要好好看 API 說明文件，了解一下後端當時是希望我們怎麼溝通的

修改 axios headers content-type: application/x-www-form-urlencoded 需搭配 qs 才有用

那就設定個 headers content-type: application/x-www-form-urlencoded 吧～

沒想到
登登登登登
瀏覽器的開發工具 Network 一樣說我 415，說我還是 content-type: application/json
我根本無法改 axios 的 headers 似的

重看了 axios 說明文（一陣子後）才發現，原來 axios 有針對將 header content-type 修改成 application/x-www-form-urlencoded format 做說明耶！
Using application/x-www-form-urlencoded format
原來是要搭配 qs 才能順利的將 content-type 改為 application/x-www-form-urlencoded

使用 axios 串接 TDX API

終於能取得 ACCESS TOKEN

async getAuthorizationHeader() {
    const parameter = {
        grant_type: "client_credentials",
        client_id: "自己的 ID 放這裡",
        client_secret: "自己的 SECRET 放這裡",
      };

      let auth_url =
        `https://tdx.transportdata.tw/auth/realms/TDXConnect/protocol/openid-connect/token`;
      try {
        let res = await axios({
          method: "POST",
          url: auth_url,
          data: qs.stringify(parameter),
          headers: { "content-type": "application/x-www-form-urlencoded" },
        });
        let accesstoken = res.data;
        return {
          authorization: `Bearer ${accesstoken.access_token}`,
        }
      } catch (err) {
        return err;
      }
},

終於能用取得的 ACCESS TOKEN 跟後端要資料了，感動！！

async getCityList() {
      let apiUrl = "https://tdx.transportdata.tw/api/basic/v2/Basic/City?%24format=JSON";
      try {
        let res = await axios.get(apiUrl, {
          headers: await this.getAuthorizationHeader(),
        });
        return await res.data;
      } catch (err) {
        console.log(err);
      }
    },

結論：說明文都有寫，不要自己嚇自己 :3

如果理解有誤，也在麻煩好心人留言更正，感謝感謝