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