Posted at

lite-server(Browsersync) - クロスドメイン制約を回避する

More than 3 years have passed since last update.

開発時のシミュレーションでローカルに立てた別のサーバーにアクセスしてファイルをダウンロードするといったことを試すときに、手軽に実行したかったのでlite-serverとコマンドを打つだけでローカルサーバーになる、lite-serverBrowsersyncのラッパー)を使用した。

そこへXMLHttpRequestすると、'Access-Control-Allow-Origin'の指定がヘッダーにないよ~アクセス出来ないよ〜と言われてしまう。

XMLHttpRequest cannot load http://localhost:3000/honyarara.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3002' is therefore not allowed access.

Browsersyncのオプションとして、プロキシとしてたてる事でも回避できるけれど、別ドメインという想定で実装を行いたかったので、browsersyncでたててるサーバー側のヘッダにどこからでもアクセスしていいよ〜という設定を追加する。

// ヘッダを追加する

function setHeader(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
}

module.exports = {
server: {
middleware: {
0: setHeader
}
}
};

これでうまくアクセスできるようになりました。