柳屋

ソースコードのリファクタからよもやままで

Lumenでクロスドメインアクセス設定

f:id:ultrasevenstar:20171129113235j:plain

現在 VueJSとLumenでSPAのサービスを作っているのですが クロスドメインに引っかかり一日がっつりハマったので備忘録も兼ねて 記述

結論

色々試行錯誤したのですが結局以下で出来ました。

Lumenのapi/public/index.phpに以下を追記

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT');

CORSについて

詳しくは https://dev.classmethod.jp/etc/about-cors/ ここなどに譲るとして、簡単に言うとJSONPは裏技的な感じなので、正式にクロスドメインアクセスを実現するための仕様です。

色々調べてるとLumenのCORS対応のライブラリインストールするとか js側でheaderを設定するとかあったんですが 結局はindex.phpにheaderの設定を書くだけで可能でした。

改修

今のソースではAccess-Control-Allow-Originが全て許可する設定になっているのでここはURL設定する方が良いと思います

;(function(document){ var pres = document.getElementsByTagName("pre") for(var i=pres.length; i--; ){  var el = makeOl(pres[i]) pres[i].appendChild(el) } function makeOl(pre){ if (pre.className.indexOf("gist") !== -1) { return } var ol = document.createElement("ol") , li = document.createElement("li") , df = document.createDocumentFragment() , br = pre.innerHTML.match(/\n/g) || 0 ol.className = "preLine" ol.setAttribute("role", "presentation") // no lang, no line-number if( pre.className && ! /lang-./.test(pre.className) ){ br.length += 1 } for(var i=br.length; i--; ){ var li2 = li.cloneNode(true) df.appendChild(li2) } ol.appendChild(df) return ol } })(document)