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 " まとめ 参考になりましたら幸いです。 ...

概要 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に移行する必要があるようなので、この点はご注意ください。 ...

概要 Omeka SのImage ServerでのCORS対応に関する備忘録です。 背景 以下の記事で、Omeka SのIIIF ServerモジュールでのCORSエラーへの対応方法を紹介しました。 上記の設定により、IIIFマニフェストファイルはダウンロードできるようになりましたが、以下のように、画像がダウンロードできなくなるケースがありました。 A c c e s s t o i m a g e a t ' h t t p s : / / x x x / i i i f / 2 / 8 4 5 5 / f u l l / 8 6 , / 0 / d e f a u l t . j p g ' f r o m o r i g i n ' h t t p s : / / u v - v 4 . n e t l i f y . a p p ' h a s b e e n b l o c k e d b y C O R S p o l i c y : T h e ' A c c e s s - C o n t r o l - A l l o w - O r i g i n ' h e a d e r c o n t a i n s m u l t i p l e v a l u e s * , ' , b u t o n l y o n e i s a l l o w e d . この症状への対処方法について紹介します。 ...

概要 DrupalのJSON:APIによる出力結果を別のアプリから利用した際、corsエラーが発生しました。ここでは、corsエラーの改善方法について説明します。 対応 以下のファイルをコピーします。 /web/sites/default/default.services.yml c p / w e b / s i t e s / d e f a u l t / d e f a u l t . s e r v i c e s . y m l / w e b / s i t e s / d e f a u l t / s e r v i c e s . y m l そして、cors.configのenabledをtrueにします。 ...