Update content from VueJS form to Kintone APP

1

Question / Problem

Hello, I'm a newbie in Kintone. Currently, I need to post input content from my Vue.js app to a Kintone app. Could you teach me how to do that, or provide a URL related to my issue?

On another note, can I get the API for the Submit Button in the FormBridge app to post input content?

Thank you.

2

Hello @tueng1995
I came across an article on using Vue.js to customize Kintone. You can refer to it here:

As for your FormBridge app, while I'm not entirely familiar with how it operates, you can find Kintone-related APIs on this page:

3

Thank @Chris
When using postman, i can upload contents to Kintone but when i add into my VueJS App, it's raised CORS error. I can't find any solutions to solved that issue. Can you have any idea?

Otherwise, my customer just used only client side, so we don't have server side to handle that issue

This is my code

axios.js

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://sample.cybozu.com',
  crossDomain: true,
});

instance.interceptors.request.use(
  async (config) => {
    // Auth token
    config.headers['X-Cybozu-API-Token'] = <API TOKEN>;
    config.headers['Content-Type'] = 'application/json';
    config.headers['Access-Control-Allow-Origin'] = '*';

    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

instance.interceptors.response.use(
  async (config) => {
    // Auth token
    config.headers['Access-Control-Allow-Origin'] = 'https://sample.cybozu.com';

    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

service.js

import axios from '@/service/axios';

export default {
  addRecord(params) {
    return axios.post(`/k/guest/40/v1/record.json`, {
      app: params.appId,
      record: params.record,
    });
  },
};
4

Hello @tueng1995
You're encountering CORS errors, likely because you're not utilizing Kintone Proxy requests. Please refer to the following documentation for more information:

5

Thank you for your response. I already tried using a proxy request, but I think it can't be used in my case.

Based on the information from this URL: kintone JavaScript API の「はじめの一歩」を踏み出そう - cybozu developer network, when I want to develop some functions within my Kintone App, I should use the Kintone JavaScript API. In situations where I need to use an API from another domain, I would typically use a Proxy Request to avoid CORS issues.

However, in my scenario, I intend to use the Kintone REST API to upload records from my Vue.js App to Kintone, so I believe Proxy Request will not be applicable.

6

Hello @tueng1995 ,

I apologize for the delayed response and any confusion regarding your situation.

From what you've described, it seems you're correct in that the kintone proxy cannot be utilized for API calls originating from another domain. As you've already identified, unfortunately, addressing this will necessitate the use of a server designed to handle cross-domain requests.