JavaScript を使用して、Boxにファイルをアップロードする際のエラーを解消したいです

JavaScript を使用して、Boxにファイルをアップロードする際のエラーを解消したい（エラー内容 Access to XMLHttpRequest at 'https://upload.box.com/api/2.0/files/content' from origin 'https://hogehoge.cybozu.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.）

Access to XMLHttpRequest at 'https://upload.box.com/api/2.0/files/content' from origin 'https://hogehoge.cybozu.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. のエラーを解消する

前提

Kintone を Javascript でカスタマイズして、Box にデータのアップロードを行いたいです。
以下のBoxのAPIを使用しようとしています。

ファイルをアップロード - APIリファレンス - Box開発者向けドキュメントポータル
https://ja.developer.box.com/reference/post-files-content/

リクエストの例には、Node.js を使うように書いてあるのですが、Kintone で Node.js の使い方が分からず、axios というライブラリを使って実行しようとしています。
Box にアップロードが出来れば、axios の使用には拘っておりません。

発生している問題・エラーメッセージ

Access to XMLHttpRequest at 'https://upload.box.com/api/2.0/files/content' from origin 'https://hogehoge.cybozu.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Chromeの開発環境から実行した際の実際のエラー画面
イメージ説明

該当のソースコード

Javascript
1const boxAccessToken = "9K9aP2uh6x5HBi6thaOWhrrxgL7HlXOS"; //開発者トークン（60分で有効期限が切れる）
2async function boxUploadTest() {
3  try {
4    //https://ja.developer.box.com/reference/post-files-content/
5
6    await axios({
7      method: "post",
8      url: "https://upload.box.com/api/2.0/files/content",
9      Authorization: "Bearer " + boxAccessToken,
10      "Content-Type": "multipart/form-data",
11      attributes: {
12        name: "test.txt",
13        parent: { id: "0" },
14      },
15      file: "テキストファイルの本文",
16    });
17    console.log("処理が終了しました");
18  } catch (error) {
19    console.log(error);
20  }
21}
22await boxUploadTest();

試したこと

Box のアプリ作成のページの構成タブのCROSドメインにURLを設定したのですが、エラーは解消しませんでした。

イメージ説明

補足情報（FW/ツールのバージョンなど）

使用している axios の CDN

https://js.cybozu.com/axios/v1.2.6/axios.min.js

Box の認証方法には「JSONウェブトークンを使用したOAuth 2.0 (サーバー認証)」を使用しています。

イメージ説明

yambejp

2023/02/24 03:29

https://hogehoge.cybozu.com からhttps://upload.box.com になぜファイルアップロードが必要なのでしょうか？ドメインが違えばCORSは必然だと思いますが

sekiseiinko

2023/02/24 03:44

やりたい事としては、１.JavaScript を使ってテキスト等のファイルを作成する２.作成したテキストファイルをBoxにアップロードするという事を行いたいです。 Javascript を実行したエラーから調べて、CORSの設定が問題という当たりをつけて、「試したこと」を行いました。 CORSについても付け焼き刃の知識で試したのですが、エラー解消のヒントになるような事があれば教えていただけないでしょうか。

yambejp

2023/02/24 03:47

私の説明はドメイン越しではCORSが普通という意味です。 cybozuからcybozu、boxからboxは問題ないはずです。なぜsybozuからboxにアップロードする必要があるのでしょうか？という確認です

sekiseiinko

2023/02/24 03:55 編集

失礼いたしました。 Kintone というサービスで作成するWebページで実装したいのですが、複数のユーザーがアクセスできるページを作り（cybozuドメイン）、その画面のボタンを押すと、ユーザーが入力したページのデータを吸い上げたファイルを作成し、box にアップロードする必要があるため行っています。

回答1件