Browsersync で CORS 対応する

やんごとなき事情により全てのパスを絶対パスでアクセスさせることにしました。

すると、開発環境内の Font Awesome のフォントファイルを読み込むところで以下のエラーが発生しました。

Access to font at ‘https://localhost:3000/webfonts/fa-solid-900.woff2’ from origin ‘https://XXX.XXX.XXX.XXX:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource

フォントファイルは https://localhost:3000 へのアクセスですが、アクセス元が https://XXX.XXX.XXX.XXX:3000 (External 用のIP)からのアクセスなのでクロスオリジンになってしまっている、と( open: 'external' を指定しているからですが、今回はこれはあまり変えたくない……というのもあり)。

デプロイ先のサーバならば一致しますが、開発環境特有の問題ですね。

となれば、 Browsersync でどうにかすることになるかと。

検索すると、以下のようなコードがヒットしました。

browserSync({
    server: {
        baseDir: './dist/'
    },
    open: 'external',
    https: true,
    //ここの部分
    middleware: function (req, res, next) {
        res.setHeader('Access-Control-Allow-Origin', '*');
        next();
    }
});

これで動くようになりました……が。

オプションにそのまま cors というものがあるのを発見したので、以下のように書き換えました。

browserSync({
    server: {
        baseDir: './dist/'
    },
    open: 'external',
    https: true,
    //差し替え
    cors: true
});

これでも動作しました。専用オプションがあるならば、そちらを使った方がすっきりするので今回はこれで対応することにしました。

参考

middleware を使った方法

cors オプション

この記事を書いた人

アバター

アルム=バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。