Отправка формы через Vue JS в Laravel с ошибкой 419/500, развернутой в Google Cloud

Question

Я пытался отправить форму, используя Vue JS с vue-resource для бэкэнда под управлением Laravel 5.5, развернутого в Google Cloud - App Engine (GAE) с SQL. В моем местном окружении все работало нормально. Но когда я развернул на GAE, я не смог опубликовать форму через /api/rsvp и покажи ошибку Failed to load resource: the server responded with a status of 419 (Internal Server Error),

Ниже приведен код:

welcome.html

<div class="container-fluid text-center full-height" id="rsvp" style="padding-top: 10em;">
      <div class="row justify-content-center">
        <div class="col-sm col-md-8 col-lg-6 col-xl-6">

          <h1 class="title">RSVP</h1>

          <div id="app" style="padding-top: 5em;">
            <form v-on:submit.prevent="addRSVP()" v-if="!sendRSVP">

              <div class="form-group">
                <div class="row justify-content-center">
                  <div class="col-8">
                    <input v-model="rsvpName" type="text" placeholder="Your name" class="form-control text-center" required>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="radio">
                  <input type="radio" id="one" value="Yeayy!!! See you there, " v-model="rsvp" required>
                  <label for="one">I am coming!</label>
                </div>
                <div class="radio">
                  <input type="radio" id="two" value="It'okay, " v-model="rsvp" required>
                  <label for="two">Sorry, can't make it.</label>
                </div>
              </div>

              <div class="form-group">
                <label for="">@{{ rsvp }} @{{ rsvpName }}</label>
              </div>
              <div class="form-group">
                <div class="row justify-content-center">
                  <div class="col-6" style="background-color: #05341f;">
                    <input type="submit" name="buttonAccept" v-bind:value="rsvpStatus" style="color: white; background-color: transparent;" class="btn btn-block">
                  </div>
                </div>
              </div>
            </form>

            <div class="alert alert-success" v-if="sendRSVP">
              <p>Thank you for your response, @{{ rsvpName }}.</p>
              <p>Would you like to send wedding wishes to us?</p>
              <div class="form-group">
                <div class="row justify-content-center">
                  <div class="col-6" style="background-color: #05341f;">
                    <a href="#wishes" class="btn btn-block" style="background-color: transparent; color: white;">Send Wedding Wishes</a>
                  </div>
                </div>
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>

Vue-main.js

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector("meta[name=csrf-token] ").getAttribute('content');

 var app = new Vue({
     el: '#app',

     data: {
            rsvp: '',
            rsvpName: '',
            sendRSVP: false,
            rsvpStatus: "Send"
     },

     methods: {
             addRSVP(){
                 this.rsvpStatus = "Loading...";
                 var postData = {name: this.rsvpName, rsvp: this.rsvp};

                 this.$http.post('/api/rsvp', postData).then((response)=>{
                   console.log(response);
                   if(response.status = 200){
                     this.rsvpStatus = "Sent!";
                     this.sendRSVP = true;
                   }
                 });
              }
      }
  });

web.php

Route::post('/api/rsvp', 'RSVPController@save');

RSVPController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\RSVP;
use Session;

class RSVPController extends Controller
{
  public function save(Request $request)
  {
    $this->validate(request(),[
      'name' => 'required',
      'rsvp' => 'required'
    ]);

    $rsvp = RSVP::create([
      'name' => request('name'),
      'rsvp' => request('rsvp')
    ]);

    return $rsvp;
  }
}

app.yaml

runtime: php
env: flex

runtime_config:
document_root: public

# Ensure we skip ".env", which is only for local development
skip_files:
  - .env

env_variables:
 # Put production environment variables here.
 APP_KEY: [app-key]
 APP_LOG: errorlog
 ## Set these environment variables according to your CloudSQL configuration.
 DB_HOST: localhost
 DB_DATABASE: [db-name]
 DB_USERNAME: [db-acc]
 DB_PASSWORD: [db-password]
 DB_SOCKET: "[my-db-socket-name]"

beta_settings:
# for Cloud SQL, set this value to the Cloud SQL connection name,
# e.g. "project:region:cloudsql-instance"
cloud_sql_instances: "[my-db-instance-name]"

app.yaml Файл выше - это конфигурация для развертывания в GAE, я что-то упускаю? Я искал решение, но все же смог найти его.

Answer 1

Мне наконец удалось решить эту проблему, изменив содержание в app.yaml файл для настройки для развертывания на Google Cloud Platform - Google Application Engine (GAE).

Мне нужно указать это в app.yaml

STORAGE_DIR: /tmp
CACHE_DRIVER: database
SESSION_DRIVER: database

Ниже обновленный app.yaml,

runtime: php
env: flex

runtime_config:
   document_root: public

# Ensure we skip ".env", which is only for local development
skip_files:
 - .env

env_variables:
# Put production environment variables here.
APP_KEY: [app-key]
APP_LOG: errorlog
   #here i missed out
STORAGE_DIR: /tmp
CACHE_DRIVER: database
SESSION_DRIVER: database
   #until here
## Set these environment variables according to your CloudSQL configuration.
DB_HOST: localhost
DB_DATABASE: [db-name]
DB_USERNAME: [db-acc]
DB_PASSWORD: [db-password]
DB_SOCKET: "[my-db-socket-name]"

beta_settings:
# for Cloud SQL, set this value to the Cloud SQL connection name,
# e.g. "project:region:cloudsql-instance"
cloud_sql_instances: "[my-db-instance-name]"

Ошибка произошла из-за того, что для сеанса приложения не задана база данных, и он не может отправить запрос с правильным сеансом.