質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
kintone

kintone(キントーン)とは、サイボウズ社が提供する業務改善プラットフォームです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

314閲覧

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

sekiseiinko

総合スコア0

kintone

kintone(キントーン)とは、サイボウズ社が提供する業務改善プラットフォームです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/02/24 03:13

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.)

前提

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 (サーバー認証)」を使用しています。

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2023/02/24 03:29

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

2023/02/24 03:44

やりたい事としては、 1.JavaScript を使ってテキスト等のファイルを作成する 2.作成したテキストファイルを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 にアップロードする必要があるため行っています。
guest

回答1

0

投稿2023/02/24 04:10

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sekiseiinko

2023/02/24 04:18

ありがとうございます。 実はこのページも見たのですが、もう一度時間をかけて読んでみます。 解決したら、解決済みにさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問