Vercelにデプロイしたexpressについて、vercel.jsonによるcors対応を行う

概要 Vercelにデプロイしたexpressについて、vercel.jsonによるcors対応を行う方法に関する備忘録です。 背景 以下の記事で紹介したプログラムについて、cors対応を行いました。 以下を参考にしています。 https://vercel.com/guides/how-to-enable-cors 方法 対応方法は以下です。他にも方法があるかと思いますが、headersを加えることで対応することができました。 https://github.com/nakamura196/dts-typescript/commit/4c28f66b2af68950656dcb812f3e941d1b9b5feb { } " " ] " ] " ] " ] v b , r , r , h e u { } e { } e { } e { } r i w d a s l " " r " " i " " " d " " ] i d s u i s d r s d p e s h o s r s t o e e o e e r o e { { { } { } n " c e e u s c u s r s u a , " : " " s r t t r t m " r d " " " " " " : : : " c i s c i a : c e k k k v k v [ : e n " e n n e r e e e a e a 2 " " " a : " a e [ " s y y y l y l , s @ [ : t : t n : " " " " u " u r v i [ i t : : : : e : e c e " " " " " " / r n n : / [ " " " : " : i c a " " " a A A A A n e p : , : t p c c c " c " d l i r i c c c G c X e / / " " u / e e e E e - x n d / / e ( s s s T s C . o t s a . s s s , s S t d s r p * - - - O - R s e ( c i ) C C C P C F " " . / " o o o T o - , i d , n n n I n T ) n t t t t O t o " d s r r r N r k , e " o o o S o e x , l l l , l n . - - - P - , t A A A A A s l l l T l X " l l l C l - o o o H o R w w w , w e - - - D - q C O M E H u r r e L e e e i t E a s d g h T d t e i o E e e n n d , r d t " s P s - i , " O " W a , S , i l " T t s v , h " a P , , l U u T A " e " c v " c a : e l p u " t e * , " " : A } c " , c t e r p u t e - " V e } r , s i o n , C o n t e n t - L e n g t h , C o n t e n t - M D 5 , C o n t e n t - T y p e , D a t e , X - A p i - V e r s i o n " まとめ 参考になりましたら幸いです。 ...

2025年4月24日 · 3 分 · Nakamura

mdx Iのオブジェクトストレージに対するproxyサーバの構築

概要 mdx Iのオブジェクトストレージに対するproxyサーバの構築に関する備忘録です。 背景 mdx Iの利用手引きにおいて、以下のように説明されています。 https://docs.mdx.jp/ja/index.html#オブジェクトストレージ mdxが提供するS3データサービス(DDN EXAScaler S3 Data Service)で取り扱うAPI仕様を記載したDataDirect Networks社のマニュアルです。 Tipsのオブジェクトストレージの利用方法例 と合わせてご確認ください。 https://docs.mdx.jp/ja/_downloads/b5d961f2c152387fa10ed951d5278f47/S3 Data Services 5.2.7 API Reference Guide.pdf こちらをGoogle NotebookLMに読み込ませ、corsの実装状況について確認しました。以下が回答です。 回答 資料 でBucket CORS Featureが未実装 であることが明記されているため、EXAScaler Access S3 APIに対して、ウェブブラウザ上で動作するJavaScriptなどから直接、異なるオリジン (例えば、APIのエンドポイントとは異なるドメインで提供されているウェブサイトのJavaScript)を通してリクエストを行うと、CORS(Cross-Origin Resource Sharing)の問題が発生し、通常はリクエストがブロックされます 。 これは、ウェブブラウザのSame-Origin Policy というセキュリティ上の仕組みによるものです。異なるオリジンからのリソースへのアクセスは、サーバー側が明示的に許可しない限り制限されます。CORSは、この許可の仕組みを提供するものですが、EXAScaler Access S3においては、この機能がまだ実装されていないため、サーバー側からのCORSヘッダーなどのレスポンスがなく、ブラウザはクロスオリジンリクエストを拒否する と考えられます。 したがって、プロキシサーバー などを利用して、クライアントサイドのリクエストを一旦プロキシサーバーに送り、そこからEXAScaler Access S3 APIにリクエストを行うことで、オリジンが一致するように見せかけるなどの回避策が必要になる場合があります。プロキシサーバーは、APIからのレスポンスに必要なヘッダーを付与する役割を担うこともできます。 ただし、これはCORSの問題を回避するための一つの一般的な方法であり、他にもサーバーサイドでAPIを公開する際にオリジンを一致させるなどの方法も考えられます。重要なのは、EXAScaler Access S3 API自体がCORSの仕組みをサポートしていない ため、クライアントサイドから直接クロスオリジンリクエストを行う際には、何らかの対策が必要になるということです。 対策 理解が間違っている点もあるかもしれませんが、上記の回答から、mdx Iのオブジェクトストレージに対するproxyサーバの構築を行うこととしました。 構築したproxyサーバのリポジトリは以下です。 https://github.com/nakamura196/s3-proxy 例えば、以下で指定したバケット上のファイルにアクセスできます。 https://s3-proxy.vercel.app/public/CETEIcean.css 一方、以下が直接アクセスした例です。 https://s3ds.mdx.jp/satoru196/public/CETEIcean.css 前者では、以下のようなレスポンスヘッダーが確認でき、CORSの設定がなされていることが確認できます。 a a c c c d e s s x x x c g a o o a t e t - - - c e c n n t a r r p v v e : h t t e g v i o e e s e e e : : e c w r r s 0 - n n r t e c c - c t t S W : - r e e c o - - u / t e l l o n e t n “ V r d - - n t n y , 3 e a - c i t r c p d r n b a d r o o e 2 5 c s y c : o l d : 3 c e p : h l : i - l o e h - n t M p r E : n a p g e a s t x d l u : x r b - p M 1 l b t 8 s r I : o l b / 2 j e e S : w i r c 0 s c s S i - c s 2 g u s a o , s 5 R r d r M i 1 i m 0 3 t : g a 3 D y : i x : K : z n - 1 Y b : a 1 L m d g : g a g e 2 M x m = 7 V - - 0 w a 1 , G i g 7 M 7 e 4 m T N = 2 u s 6 6 s / 3 9 t A 0 9 - I 7 4 r h 2 8 e g 0 6 v ” 0 5 a 0 9 l ; 2 i - d i 2 a n b t c 2 e l 8 u 6 d a e a S c u d b 0 D 6 o 2 m a i n s ; p r e l o a d 実装 Expressを用いて、以下のように実装しました。aws-sdkについては、AWS SDK for JavaScript v3に移行する必要があるようなので、この点はご注意ください。 ...

2025年3月23日 · 8 分 · Nakamura

異体字リストを取得するためのAPIの試作

概要 以下のページで「史料編纂所データベース異体字同定一覧」が公開されています。 https://wwwap.hi.u-tokyo.ac.jp/ships/itaiji_list.jsp 今回は、上記のページで公開されているデータをJSON形式で取得するためのAPIを作成します。 開発したもの 以下のURLからアクセスいただけます。 https://hi-itaiji.vercel.app/ 同定一覧における「char(異体字)」をキーとして、「base」の漢字を値とするマッピングを返却します。 まとめ 異体字リストの応用にあたり、参考になりましたら幸いです。

2025年2月10日 · 1 分 · Nakamura