因為 kintone 有開放 Rest API 讓使用者串接，這篇嘗試用 Nuxt3 來取得資料。

先處理 CORS

眾所皆知，直接發跨域請求會遇到 CORS，瀏覽器會把我們擋下來，所以一開始我們先來處理 CORS，對這個東西有疑惑的可以參考 同源政策（Same Origin Policy）。

先把開發環境裝起來：

npx nuxi@latest init <project-name>

接著使用 Nuxt3 提供的 Nitro 伺服器建立 server API，之後發送都會先透過這個 server，由 server 替我們發送 API 再將 response 丟回來給前端，當成 Proxy 的作用。

所以先在根目錄建立 server/api/kintone.ts，並且寫上：

import { joinURL } from 'ufo'

export default defineEventHandler(async (event) => {
  return proxyRequest(event, 'https://test.cybozu.com/k/v1/records.json?app=62', {
    fetchOptions: {
      credentials: 'include',
      headers: {
        'x-cybozu-api-token': 'XXXXXXX'
      }
    }
  })
})

token 暫時寫死在這裡，有需要可以放到環境變數。

取得資料

<script setup lang="ts">

const records = ref<{
  $id: { value: string },
  公司名稱: { value: string },
  公司縣市: { value: string },
  單行文字方塊: { value: string },
}[]>([])

const getRecords = async () => {
  try {
    const response = await $fetch('/api/kintone')
    return response.records
  } catch(e) {
    console.log(e)
  }
}

onBeforeMount(async () => {
  records.value = await getRecords()
})

</script>

<template>
  <ul>
    <li v-for="record in records" :key="record[`$id`].value">
      <p>{{ record['公司名稱'].value }}</p>
      <p>{{ record['公司縣市'].value }}</p>
      <p>{{ record['單行文字方塊'].value }}</p>
    </li>
  </ul>
</template>

設定環境變數

剛剛因為都是寫死網址跟 TOKEN，有需要可以將它放在以下：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  runtimeConfig: {
    proxyUrl: process.env.PROXY_URL,
    apiToken: process.env.API_TOKEN
  }
})

PROXY_URL=
API_TOKEN=