MAMPでVirtualHost使用時にCORSエラーを回避する。

問題

• Laravelのpublicにバーチャルホストで開いている。
• Vue.jsとLaravelを連携している。

という条件の時、

Access to XMLHttpRequest at

のようなCORSエラーで通信できなかった。

origin = protocol + host + port らしいので、
ローカル同士でも、バーチャルホストでホスト名を変えてしまうとAjax通信ではブロックされてしまう。

解決法

下のページの通りにやるとできた。

.htaccess : CORSはMAMP LOCALHOSTでは有効になりません

……

www.fixes.pub

Apacheのhttpd.confに許可設定を追記する。

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

上記でできない時は以下を行う。もしくは両方必要？

Header 〜とある下の３行を許可したいバーチャルホストのブロックに追記する。

## projectName
<VirtualHost *:80>
    ServerName projectName.local.com
    DocumentRoot "/www/projectName/"
    Header set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods "POST, PUT, GET, DELETE, OPTIONS"
    Header always set Access-Control-Allow-Headers "Content-Type"
</VirtualHost>