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();
    }
});

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

• Browsersync options

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

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

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

参考

middleware を使った方法

• javascript – BrowserSync + gulp: Cross domain Cors Issue – Stack Overflow
• BrowsersyncでAccess-Control-Allow-Originを設定する方法 – Qiita
• Browsersync options – middleware

cors オプション

• Browsersync options – cors