開発中のSvelte/SvelteKitのDevサーバーのCORS対策

Svelteアプリ開発中でも、外部のサイトへHTTPリクエストを飛ばしたいときがあります。
とはいえ、接続先のサーバーの設定にもよりますが、ほとんどの場合、クロスオリジンドメイン防止の対応がなされており、Devサーバー(

http://localhost

)を跨いたアクセスが通らなくなっています。
893x301

以前の記事において、

「開発中のAngular/ExpressのCORS対応」

の記事で、どうすればDevサーバー側から外部へアクセスさせることができるかを図解して説明しておりました。

【サーバーサイドAngular】AngularでビルドしたWebアプリでExpress.jsからCORSプロキシを設定する

Anguarの開発サーバーを立ち上げる際のプロキシルートの設定方法

今回は、そのSvelte版のお話ということで、手短に説明しておきます。

Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き

超JavaScript 完全ガイド 2024

Viteのサーバープロキシ機能

単刀直入にいうと、Viteにも

『サーバープロキシ』

という機能があるので、これを利用します。
プロキシルートの概念について復習しておくと、おおよそ以下のような模式図になります。
978x575

つまり、自身のドメイン内に定義したルートにアクセスした場合、Viteの受け持つDevサーバーがアプリケーションに代わり外部へ接続してくれています。
では一例として、Viteのプロキシルートの定義してみます。
設定は、

vite.config.ts(もしくはvite.config.js)

で行います。

開く/閉じる

            import { defineConfig } from 'vite';

// ...

export default defineConfig({
    // ...
    server: {
        proxy: {
            '/api': {
                target: "https://hoge.piyo.com",
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    }
})

上の例だと、

http://localhost:12345/api

でアクセスした場合、

target

に設定したルールにより、ドメイン名が書き換わり、

https://hoge.piyo.com/api

と解釈されます。
ただ、便宜上

/api

というプロキシルート名をおいたため、ルート名が実際のアクセス先にまで残っていられると困るため、

rewrite

に記述したメソッドによって都合の良いURLパスに修正することができます。
ここでは、

rewrite

によって、プロキシ変換されたパスである

https://hoge.piyo.com/api

から、

/api

を消去して

https://hoge.piyo.com

にアクセスすることになります。

より詳しいProxy設定は以下のリファレンスの内容でご確認ください。

参考｜server.proxy - Vite Configuration

プロキシルートを利用する場合、アクセス先のドメイン部分を、プロキシルート名で置き換えるような一手間が必要になります。

開く/閉じる

            cosnst url = 'https://hoge.piyo.com/?huga=moga&buyo=jifo';
const urlForProxy = url.replace(/^https\:\/\/hoge\.piyo\.com/m, '/api');

const response = await fetch(urlForProxy, {
    method: 'GET',
    headers: {
        'content-type': 'application/json'
    },
});

const rslt = await response.text();
//OR, const rslt = await response.json();
console.log(rslt);

これで開発サーバーを実行し、外部サイトにアクセスできていたらOKです。
697x297

(※ 図は外部サーバーの一例でAWS S3にアクセスしたときのものです。)

Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き

超JavaScript 完全ガイド 2024

余談〜ViteのCORS設定の注意点

別解として触れておくと、Viteの設定項目に

server.cors

という名前もそれっぽいものが存在します。
開発者にとってはCORS対応はいつも頭の痛くなる問題であり、あまり深く考えたくもないので、「

cors: true

にすれば大丈夫な気がする...」ということで、ついつい試してみたくなるものです。

開く/閉じる

            import { defineConfig } from 'vite';

// ...

export default defineConfig({
    // ...
    server: {
        cors: true
    }
})

いざ、これで開発サーバーから外部へ接続できたかというと...
893x301

全く問題が解決していません。
"CORS"という名前で勘違いしやすい設定項目かもしれませんが、先程のプロキシ機能がDevサーバーから外部へのアクセスを可能とするものに対して、こちらのCORS機能は外部のドメインからDevサーバーへアクセスする際のCORSルールの設定を行うものです。
これによって、今回の主題とは関係はないのですが、

Express/CORS

で実装するようなサーバー機能をViteでも簡単に実現できるようになります。

参考｜Configuring CORS Asynchronously - Express.js

Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き

超JavaScript 完全ガイド 2024

まとめ

今回は外部のサイトにアクセスする必要があるタイプのSvelte(クライアント)アプリの開発では必須ともいえる、Viteのプロキシルート機能について解説しました。
フロントエンドの開発をやっていると、ちょくちょくCORSの問題につまずくことも多いので、開発中はViteのプロキシルートを忘れずに活用していきましょう。