BETA

Browsersync で CORS 対応する

投稿日:2020-07-15
最終更新:2020-07-15

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

すると、開発環境内の 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 オプション

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

アルム=バンドのQrunch

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう