1. nyamogera

    Posted

    nyamogera
Changes in title
+lite-server(Browsersync) - クロスドメイン制約を回避する
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,29 @@
+開発時のシミュレーションでローカルに立てた別のサーバーにアクセスしてファイルをダウンロードするといったことを試すときに、手軽に実行したかったので`lite-server`とコマンドを打つだけでローカルサーバーになる、[lite-server](https://github.com/johnpapa/lite-server)([Browsersync](https://www.browsersync.io/)のラッパー)を使用した。
+
+そこへ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
+ }
+ }
+};
+```
+
+これでうまくアクセスできるようになりました。
+
+- [broser-sync Options](https://github.com/BrowserSync/browser-sync/wiki/options)