外部システムに添付ファイルをアップロードしたい

いつもお世話になっております。1点ご質問させてください。

kintoneに添付されたファイル(PDF)を他システム(Cloudsign)に連携したいため、kintoneJS上で実装しています。

以下を参考に実装しましたが、400のエラーでファイルが認識されません(空?のような認識になっているようです)
https://developer.cybozu.io/hc/ja/articles/200814380
https://developer.cybozu.io/hc/ja/articles/200724665

また、以下の投稿を確認しました。
https://developer.cybozu.io/hc/ja/community/posts/255646366

上記のやりとりを見て、Cloudsign社に確認したところ、最近CORS対応したという回答をもらいました。
というわけで、CORS対応している別サービスのAPIに、XMLHttpRequestでファイルを送信したいです。

連携サービス側(Cloudsign側)で、CORS Origin URL の入力欄があり、
APIを利用するウェブアプリ(つまりKintone)の
URL のスキーマとホスト名部分を記入する必要があるのですが、
ここにはkintoneの何を入力すれば良いのでしょうか。

また、連携サービス側にCORSの設定をしたうえで、Kintoneでどう書けば良いかもご教示いただきたいです。

 

何卒よろしくお願いいたします。

miyachi様

お世話になっております.
トヨクモの江田と申します.

下記を見る限り,「https://****.cybozu.com/」のように入力すればよいかと思います.(****の部分はお使いのkintoneのサブドメインを入れてください.)
https://help.cloudsign.jp/ja/articles/428992-cors-%E3%81%B8%E3%81%AE%E5%AF%BE%E5%BF%9C%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

また,kintone外部にファイルをアップロードする際は,「kintone.proxy.upload()」を用いると良いです.
https://developer.cybozu.io/hc/ja/articles/202166320

返信が遅くなり申し訳ありません。
漠然とした質問にもかかわらず、回答いただきありがとうございます。

現状、未だ解決に至っておりません。
調べた中で、確認させていただきたい内容がございます。

■XMLHttpRequestを利用して実装を試みた場合--------------------------------------------------------------------------------------------------------------------

接続先(クラウドサイン)側にてCORSの設定をしましたが、リクエストを送信するタイミングで以下のエラーになってしまいます。

Access to XMLHttpRequest at ‘[https://api-sandbox.cloudsign.jp/\*\*\*\*](https://api-sandbox.cloudsign.jp/ **** )’ from origin ‘https://****.cybozu.com’ has been blocked by CORS policy
:No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

「Access-Control-Allow-Origin」ヘッダーが、存在しないためエラーになっているのではないかと考えています。

たしかに、Kintoneの「セキュアコーディング-ガイドライン」というところに、以下の記載があります。

クロスドメイン制約
クロスドメイン制約のため、XHR(XMLHttpRequest) を使用したcybozu.comと外部サイトとの通信はできません。Access-Control-Allow-Origin ヘッダーは付与できません。

これは、接続先側のサービスで、CORS設定などいくら対応したとしても、
KintoneのJavaScriptからは、XMLHttpRequestを利用して接続できないという理解で良いのでしょうか?
(以下のスレッドで解決した旨の記載はあったので、どうにかできるのでしょうか・・)
[https://developer.cybozu.io/hc/ja/community/posts/255646366-外部システムへのAPI実行時-data部分の記載について])

■kintone.proxy.uploadを利用して実装を試みた場合--------------------------------------------------------------------------------------------------------------------

接続先のAPIのRequest bodyは「multipart/form-data」という形式の指定があり、
name(string)、uploadfile(string($binary))をセットするよう記載があります。

そのため、FormDataという型にファイルをセットして、実行しますが、upload実行のタイミングで以下のエラーになってしまいます。

Uncaught (in promise) Error: Usage: kintone.proxy.upload(url, method, headers, data, opt_callback, opt_errback)

以下のように実装を入れているのですが、間違っているところ等ありましたら、ご教授頂けると幸いです。
(ファイルやID、Tokenは、設定されています。)

// ファイルをダウンロード
var url = kintone.api.urlForGet(‘/k/v1/file’, { fileKey: files[0].fileKey }, true);
return kintone.proxy(url
, ‘GET’
, {“Authorization”: ‘Basic ****’, “X-Cybozu-Authorization”: ‘****’}
, {});

}).then(function(resp2) {

file = resp2[0];
var blob = new Blob([file]);

var formData = new FormData();
formData.append(“name”, “ファイル名”);
formData.append(“uploadfile”, blob);

// ドキュメントにファイルを追加(POST /documents/{documentID}/files)
return kintone.proxy.upload(‘https://api-sandbox.cloudsign.jp/documents/’ + documentID + ‘/files’
,‘POST’
, {“Authorization”: 'Bearer ’ + accessToken, “Content-Type”: “multipart/form-data”}
, {
‘format’: ‘RAW’,
‘value’: formData,
}
);
}).then(function(resp3) {

// 続きの処理

});

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

何卒宜しくお願いいたします。