TDX api 串接将 ajax 改为 axios，解决 415 错误，解决 headers content-type 无法更新

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

如果理解有误，也在麻烦好心人留言更正，感谢感谢