vue-cli+xamppでのローカル開発でCookieが送信されない

Question

実は以前にセッションが効かないという件で質問しました。

あの際はとりあえずの回避でごまかしたのですが、状況が伝えきれてなかったのとモヤモヤしているのでちゃんと説明して改めて質問してみます。

---

環境はローカルでXAMP バーチャルホストでaaa.localhostで立ち上げています。

そしてvue uiでダッシュボードが立ち上がった後にタスクのServeから「タスクを実行」してlocalhost:8080を起動させてあります。

---

で以前の質問では状況というかやりたいことをちゃんと説明しきれてませんでした。

まずはaaa.localhost側で動作中のサービスがあるのですが、今回そこへ機能追加をすることとなりました。

稼働中のサービスはPHP＋jQueryだったのですが今回の機能追加分はVueで開発することになりました。

そのために開発中のみ考慮しなければいけない事としてaaa.localhostからlocalhost:8080（最初の画面を/firstとします）へなんとかセッションを引き継ぎたかったのです。

（コンパイルというかdistすれば同じaaa.localhost上で動作しますので何も気にしなくてもそもそもセッションは正しく動作するので）

そこで開発中のみの動きとしてaaa.localhost/aaa/からPHPSESSIDをもらって、localhost:8080へのリンクにクエリとしてPHPSESSIDをつけるようにしました。

そしてlocalhost:8080/firstでは受け取ったクエリ「PHPSESSID」を意図的に手動でブラウザcookieへセットする事でそこからは他の画面でもAXIOSでcookieを送ってくれるだろうと思っていたのです。

axiosのdefaultのクレディンシャルだとか、PHP側での同じくheaderでの設定はすべて完了していると思います。

そうした所色々調べてみた所、Firefoxでセキュリティを少し下げることを行うとリクエストヘッダにCookieをちゃんとつけて送ってくれるのでセッションもそのまま引き継げています。

ただChromeはcookieのセット自体は成功しますが何をやってもリクエストヘッダにcookieを一緒に送ってくれません。

そのへんの関係で前回無理やりGETで送るようなことをしていました。

この辺はChromeでは何をしても送られないものでしょうか？？

なにかヒントでもあればと思います・・

よろしくお願いいたします。

Answer 1

質問しっぱなしで放置してたので簡単に書いておきます。

現状やってみて出来た方法がとりあえず２つ。

１つは一番素直で簡単な方法
vue.config.jsにプロクシを記載するやり方。
cliだと設定を変更していなければlocalhost:8080で起動しますが、そこからaxiosでのアクセスにプロクシをかます事でXAMPPの***.localhost等のバーチャルホストでのサーバーへアクセスできます。

２つめは少々特殊なやり方というか本来のやり方はこちらなんですが・・
xamppのサーバーにオレオレSSL証明を発行する。
細かい説明はネットで調べていただくとして、それによってローカルがhttps化されるのでPHPでちゃんとcoocieの設定すればクッキーをやり取りすることが出来ます。

どちらでも最終的には可能ですがcliでやる限りは圧倒的にvue.config.jsに設定を書くのが楽です。