ホーム 記事一覧 ブック DH週間トピックス 検索 このサイトについて
English
Vercelにデプロイしたexpressについて、vercel.jsonによるcors対応を行う

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 { "version": 2, "builds": [ { "src": "src/index.ts", "use": "@vercel/node" } ], "rewrites": [ { "source": "/api/dts(.*)", "destination": "/src/index.ts" } ], "redirects": [ { "source": "/", "destination": "/api/dts", "permanent": true } ], "headers": [ { "source": "/api/(.*)", "headers": [ { "key": "Access-Control-Allow-Credentials", "value": "true" }, { "key": "Access-Control-Allow-Origin", "value": "*" }, { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" }, { "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" } ] } ] } まとめ 参考になりましたら幸いです。

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

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の設定がなされていることが確認できます。 access-control-allow-origin: * age: 0 cache-control: public, max-age=0, must-revalidate content-encoding: br content-type: text/css date: Sun, 23 Mar 2025 03:11:27 GMT etag: W/“3d5c-psb8jsgRM3DKYLgMVwi7Ns/AIhg” server: Vercel strict-transport-security: max-age=63072000; includeSubDomains; preload x-powered-by: Express x-vercel-cache: MISS x-vercel-id: hnd1::iad1::zbdgm-1742699486592-2b286aacd062 実装 Expressを用いて、以下のように実装しました。aws-sdkについては、AWS SDK for JavaScript v3に移行する必要があるようなので、この点はご注意ください。 ...

Omeka SのImage ServerでのCORS対応

Omeka SのImage ServerでのCORS対応

概要 Omeka SのImage ServerでのCORS対応に関する備忘録です。 背景 以下の記事で、Omeka SのIIIF ServerモジュールでのCORSエラーへの対応方法を紹介しました。 上記の設定により、IIIFマニフェストファイルはダウンロードできるようになりましたが、以下のように、画像がダウンロードできなくなるケースがありました。 Access to image at 'https://xxx/iiif/2/8455/full/86,/0/default.jpg' from origin 'https://uv-v4.netlify.app' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. この症状への対処方法について紹介します。 方法 複数の箇所にaccess-control-allow-originが記載されていることが原因です。 上記の記事の対応により、サイト全体に対してCORSの設定を行いましたので、Image Serverモジュールにおける設定が適用されないように修正します。なお、このような対応が必要なものは特定のバージョンのモジュールで、最新のモジュールなどを使用する場合には不要かもしれません。 具体的には、以下のファイルに記載されています。 https://github.com/Daniel-KM/Omeka-S-module-ImageServer/blob/master/src/Controller/ImageController.php 以下のように記載されており、条件によって適用の可否が設定されていますが、使用しているバージョンや他のモジュールとの組み合わせにより、この条件が適用されず、複数のaccess-control-allow-originが設定されてしまうことが原因かと思われます。 $headers->addHeaderLine('Access-Control-Allow-Origin', '*'); 上記のような記載をコメントアウトすることにより、'Access-Control-Allow-Origin' header contains multiple values '*, *'というエラーを解消することができました。 まとめ 同様の事象の遭遇することは稀かもしれませんが、Omeka Sを用いたIIIF画像配信にあたり、参考になりましたら幸いです。

DrupalのJSON:APIにおけるcorsエラーへの対応

DrupalのJSON:APIにおけるcorsエラーへの対応

概要 DrupalのJSON:APIによる出力結果を別のアプリから利用した際、corsエラーが発生しました。ここでは、corsエラーの改善方法について説明します。 対応 以下のファイルをコピーします。 /web/sites/default/default.services.yml cp /web/sites/default/default.services.yml /web/sites/default/services.yml そして、cors.configのenabledをtrueにします。 # Configure Cross-Site HTTP requests (CORS). # Read https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS # for more information about the topic in general. # Note: By default the configuration is disabled. cors.config: enabled: false # ここ! # Specify allowed headers, like 'x-allowed-header'. allowedHeaders: [] この結果、corsエラーを解消することができました。 まとめ 同様のことでお困りの方の参考になりましたら幸いです。