iT邦幫忙

1

TDX api 串接將 ajax 改為 axios,解決 415 錯誤,解決 headers content-type 無法更新

  • 分享至 

  • xImage
  •  

今天跟著 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

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


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Karen
iT邦新手 5 級 ‧ 2022-12-18 16:35:08

在415撞牆撞到懷疑人生時看到大大的文真的痛哭流涕/images/emoticon/emoticon02.gif

實測過成功解決了我的問題!

我要留言

立即登入留言