今天跟著 TDX 的串接說明文(TDX運輸資料流通服務API介接範例程式碼說明)試圖串一串 TDX API
TDX 官方有提供 Ajax 的串接範例(Sample.js)
而我這次想用 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 說明文件,了解一下後端當時是希望我們怎麼溝通的
那就設定個 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
終於能取得 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
如果理解有誤,也在麻煩好心人留言更正,感謝感謝