通过 Vue JS 提交表单到 Laravel 在 Google 云上部署时出现错误 419/500

Question

我试图使用 Vue JS 和 vue-resource 提交表单到后端运行 Laravel 5.5 部署在 Google Cloud - App Engine (GAE) SQL.在我的本地环境中，一切正常。但是当我在 GAE 上部署时，我无法通过 /api/rsvp post 表单并显示错误 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 云平台 - Google 应用程序引擎 (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]"

发生错误是因为应用程序会话未设置到数据库，并且无法使用正确的会话发送请求。

通过 Vue JS 提交表单到 Laravel 在 Google 云上部署时出现错误 419/500

Submitting form via Vue JS to Laravel getting error 419/500 deployed on Google Cloud

google-app-engine

vue.js

vue-resource

laravel-5.5