获得 200 响应但未命中控制器 store() 方法

Question

我正在将刀片文件中的表单切换为使用 axios 发布的基于 vue 的表单。我收到 200 响应，但我没有在控制器中点击我的 store() 方法。我用原始刀片形式击中它。到目前为止，我尝试过的事情是手动添加 csrf 令牌，将标头更改为内容类型多部分，将发布数据更改为 JSON 字符串，以及更改句柄提交以触发表单。这些似乎都没有任何效果。我的刀片文件包含 vue 表单@extends('layouts.app')@section('content')<div class="container">    <create-post></create-post></div>@endsection我在 web.php 中的帖子路线Route::get('/p/create', 'PostsController@create');Route::post('/p', 'PostsController@store');我的postsController 中的store 方法，我设置了一个console.log 只是为了看看如果我正在点击它，它看起来我不是class PostsController extends Controller{    public function __construct()    {        $this->middleware('auth');    }    public function create()    {        return view('posts/create');    }    public function store()    {        console.log('hit store method');        //VALIDATES DATA        $data = request()->validate([            'caption' => 'required',            'image1' => ['required', 'image',],            'image2' => 'image',            'image3' => 'image',            'image4' => 'image',            'image5' => 'image',        ]);        //CREATE IMAGES ARRAY AND UPLOADS TO S3        $imageArray = [];        $imageCount = 1;        foreach($data as $key => $value){            if (strpos($key, 'image') !== false) {                $imagePath = request('image' . $imageCount)->store('uploads', 's3');                $imageCount ++;                array_push($imageArray, 'https://instagrizzle-development.s3.amazonaws.com/' . $imagePath);            }        }        //Relational method HARDCODED profile        auth()->user()->profiles[0]->posts()->create([            'caption' => $data['caption'],            'image' => json_encode($imageArray),        ]);        return redirect('/profile/' . auth()->user()->profiles[0]->id);    }}添加action='/p' enctype="multipart/form-data" method="post"到表单标签似乎是多余的，但我想我会尝试一下。也不确定，但 axios 默认会自动添加 csrf 令牌吗？任何帮助，将不胜感激。提前致谢

Answer 1

看起来你有错误的中间件

auth 代替 auth:api 在你的控制器构造函数中

见：https ://laravel.com/docs/5.8/api-authentication#protecting-routes

您也可能在您的 axios 调用中遗漏了一些标头，您可以在

你的浏览器，如果他们都在那里。

还要验证您的 DOM 以获取 csrf-token

然后你可以使用一个包装 Axios 对象来设置你的默认标题。

像这样。（例如将其保存到 api.js）

import Axios from 'axios'

export default() => {

  return Axios.create({

    headers: {

      'Accept': 'application/json',

      'Content-Type': 'application/json',

      'X-Requested-With': 'XMLHttpRequest',

      'X-CSRF-TOKEN' : document.head.querySelector('meta[name="csrf-token"]').content

    }

  })

}

然后导入 axios 你的 vue 组件..

import Api from './api';

然后你可以像使用 axios 对象一样使用它

Api().request()

或者，如果您将通过所有 axios 调用使用这种单一的身份验证方式。你只需像 laravel 在他们的引导文件中启动一样

像这样：

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Answer 2

用 return 'ok' 替换它；。console.log() 是 javascript，它在 php 中不起作用 – porloscerros Ψ 11 月 28 日 23:37