###Vue2とCakePHP3を共存して動かす
初投稿です。
現在とあるプロジェクトで、SPA型の管理画面を作成しています。
フロントのビューやルーティングなどはVue.jsで行い、CakePHP3では主にAPIを提供する形になっています。
CakePHP3で格納したセッション情報をVue.jsに渡す際に、値が空になってしまっています。
恐らく、Vueはnode、CakePHPはApacheで動かしているため、渡すことが出来ないのかと思っています。
また、URLも異なっているため、CROSに引っかかる形になっており、サーバー側の.htaccess
にAccess-Control-Allow-Origin
の設定をしています。
このような構成が初めてな為、同一ホスト(同一ドメイン上?)で動作させる設定等のアドバイスを頂きたいと思っています。
###開発環境
CentOS6.4
Vagrant + VirtualBox
CakePHP3 (vagrant upで立ち上げて、ホスト名 dev.localhost に変更)
Vue2 (vue-cliを使用して、npm run dev
で立ち上げ。localhost:8080 で表示される)
###ディレクトリ構成
$ pwd
/var/www/html
app/ ├ api/ (CakePHP3本体) │ ├ src/ │ │ └ controller/(各API) │ ├ config/ │ │ └ routes.php │ └ .htaccess ├ build/ (ビルドファイル) ├ config/ (設定ファイル群) ├ src/ (Vueのコンポーネント類) ├ dist/ (公開フォルダ) ├ node_module/(モジュール群) └ index.html
その他、eslintなどの設定ファイルは省略しています。
CakePHP側
.htaccess
DocumentRoot "/var/www/html/app/api/" # この設定で、dev.localhostにアクセスすると、CakePHPのホーム画面が表示されています。
routes.php
PHP
1$routes->connect('/api/users', ['controller' => 'Users', 'action' => 'getUsers', '_ext' => 'json']); 2// このような形でAPIのURLを設定 3// dev.localhost/api/users でアクセスすると、jsonデータが表示されます。
Vue.js側
npm run dev
をコマンドで、立ち上げて、localhost:8080でアクセス。(Vueのホーム画面が表示)
実際にAPIを叩いているコード
js
1import axios from 'axios'; 2 3export default { 4 name: 'Contractor', 5 created() { 6 axios.get('http://dev.localhost/api/users') // axios.get('/api/users')のように取得したい 7 .then((response) => { 8 console.log(response); 9 }) 10 .catch((error) => { 11 console.log(error); 12 }); 13 },
上記のコードで取得が出来ますが、この状態だと、完全に分離してしまっているような気がして...
また、冒頭で申し上げた通り、CakePHPのコントローラーで、セッションを作成して、それをレスポンスデータとして返すとnullになっている状況です。
ご経験のある方などアドバイス頂ければと思っています。
よろしくお願いします。
参考にしたサイト類
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/09/07 01:05
2017/09/07 03:02 編集
退会済みユーザー
2017/09/07 03:34
2017/09/07 06:08
退会済みユーザー
2017/09/07 07:24
退会済みユーザー
2017/09/07 10:58