Vue Axios 帖子在 Laravel (api) 中被取消

Question

我目前正在重构一些旧代码。我想获取一个 vue 表单的数据，以便通过 laravel 的 api 发布到我的数据库中。查看我得到的 json 输出和控制器方法，一切对我来说都很好。我还尝试将 Route::post 代码移动到常规 web.php，但没有成功。

我将发布我的架构和确切错误消息的屏幕截图（xhr 已取消）。

---

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::get('/session', 'SessionController@index');
Route::get('/session/{id}', 'SessionController@currentRoom');

Route::post('/create', 'SessionController@create');
Route::put('/session/{id}', 'SessionController@update');
Route::delete('/session/{id}', 'SessionController@destroy');

SessionController.php

---

<?php

namespace App\Http\Controllers;

use App\Services\LongPolling;
use Faker\Generator;
use App\Session;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Response;


class SessionController extends Controller
{
    public function create(Request $request)
    {
        // $session = new Session();
        // $session->playerName = $faker->name;
        // $session->playerId = $faker->numberBetween($min = 0, $max = 127);
        // $session->roomName = $faker->name;
        // $session->roomDescription = $faker->text;
        // $session->overallValue = $faker->numberBetween($min = 10, $max = 70);
        // $session->playerValue = $faker->randomDigitNotNull;
        // $session->isAdmin = $faker->boolean ? false : true;
        // $session->save();

$validator = Validator::make($request->all(), [
    'roomName' => 'required|string',
    'roomDescription' => 'required|string'
]);
if ($validator->fails()){
    return Response::json(['errors' =>$validator->errors()], 422);
}
  $session =  Session::create([
      'roomName' => $request('roomName'),
      'roomDescription' => $request('roomDescription')
  ]);

  return Response::json(['session' => $session,
  'message' => 'success'], 200);
    }

创建.vue

---

<template>
  <div>
    <form>
      <strong>roomname:</strong>
      <br />
      <input type="text" v-model="roomName" />
      <br />
      <strong>description:</strong>
      <br />
      <input type="text" v-model="roomDescription" />
      <br />

      <button v-on:click="formSubmit">Click me</button>
  </form>
    </div>

</template>

<script>
export default {
  components: {},
  data() {
    return {
      roomName: "",
      roomDescription: ""
    };
  },
  methods: {
    formSubmit() {
      axios
        .post("/api/create", {
          roomName: this.roomName,
          roomDescription: this.roomDescription
        })

        .then(function(response) {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style>
</style>

room.blade.php

---

<!-- Stored in resources/views/child.blade.php -->


@extends('layouts.app')


@section('title', 'Scrumpoker')



@section('content')
<br>
<br>


<create>
</create>



@endsection

app.js

---

require('./bootstrap');


import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'



import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.use(Vuetify)

const opts = {}


// Vue.component('App', require('./components/App.vue').default);
// Vue.component('Card', require('./components/card.vue').default);
// Vue.component('session', require('./components/Session.vue').default);
Vue.component('create', require('./components/Create.vue').default);





const app = new Vue({
    el: '#app',
    vuetify: new Vuetify(),

});

Answer 1

检查它是否与 CORS 相关而不与 POST 相关？