在提交 Vue js 和 Laravel 时找不到 POST 404？
Posted
技术标签:
【中文标题】在提交 Vue js 和 Laravel 时找不到 POST 404？【英文标题】：POST 404 not found on submit Vue js and Laravel? 【发布时间】：2020-07-14 22:33:50 【问题描述】：我是 Vue js 的新手。我正在尝试存储数据。我在welcome.blade.php 中加载<router-view>：
<div id="app">
<router-view></router-view>
<br>
<router-link :to=" name: 'home' ">Home</router-link>
<router-link :to=" name: 'about' ">About</router-link>
<router-link :to=" name: 'jobseekercreate' ">Job Seeker Create</router-link>
</div>
你可以看到我有 3 个链接。如果我点击 jobseekercreate 链接，它可以工作，但如果我刷新页面，我会收到 404 错误。如果我刷新主页或关于链接的页面，我会正常看到主页和关于组件。为什么如果我点击 jobseekercreate 链接它可以工作，但如果我刷新页面我得到 404 not found 错误？
在 JobSeekerCreate.vue 组件中，当我单击“创建配置文件”按钮时，出现 2 个错误。
1) POST http://vuehighrjobs.test/jobseeker/create 404（未找到）？ 也许这与上面的问题有关？
这是我的代码。 JobSeekerCreate.vue 组件与 createProfile 方法：
<style>
[v-cloak]
display: none;
</style>
<template>
<div class="row">
<div class="col-md-10 offset-md-1">
<div class="alert alert-danger" v-if="errors.length > 0">
<ul>
<li v-for="error in errors">error</li>
</ul>
</div>
<h1>Create Profile</h1>
<div class="form-group">
<label for="experience">Experience:</label>
<textarea class="form-control" v-model="jobseekerprofile.experience" id="experience" rows="10" maxlength="1000"></textarea>
</div>
<div class="form-group">
<label for="additional-skills">Additional Skills (optional):</label>
<textarea class="form-control" v-model="jobseekerprofile.additional_skills" id="additional-skills" rows="3" maxlength="250"></textarea>
</div>
<div class="form-group">
<button @click="createProfile" type="submit" class="btn btn-primary">Create Profile</button>
</div>
<br><br><br><br>
</div>
</div>
</template>
<script>
import Admin from './Admin'
import AdminSideNav from '../components/AdminSideNav'
export default
name: 'JobSeekerCreate',
components:
Admin,
AdminSideNav
,
data()
return
jobseekerprofile:
experience: '',
additional_skills: ''
,
jobseekerprofiles: [],
uri: 'http://vuehighrjobs.test/jobseeker/create',
errors: [],
loading: false
,
methods:
createProfile()
axios.post(this.uri, name: this.jobseekerprofile.experience, body: this.jobseekerprofile.additional_skills)
.then(response=>
this.jobseekerprofiles.push(response.data.jobseekerprofile);
this.resetData();
)
.catch(error=>
this.errors = [];
if(error.response.data.errors.experience)
this.errors.push(error.response.data.errors.experience[0])
if(error.response.data.errors.additional_skills)
this.errors.push(error.response.data.errors.additional_skills[0])
);
</script>
routes.js：
import Home from './views/Home'
import About from './views/About'
import JobSeekerCreate from './views/JobSeekerCreate'
export default
mode: 'history',
routes: [
path: '/',
component: Home,
name: 'home'
,
path: '/about',
component: About,
name: 'about'
,
path: '/jobseeker/create',
component: JobSeekerCreate,
name: 'jobseekercreate'
,
]
web.php：
Route::get('/any?', function ()
return view('welcome');
);
api.php:
Route::middleware('auth:api')->get('/user', function (Request $request)
return $request->user();
);
Route::resource('jobseekerprofile', 'JobSeekerProfileController');
welcome.blade.php 文件：
<!DOCTYPE html>
<html lang=" str_replace('_', '-', app()->getLocale()) ">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highr Jobs</title>
<!-- Custom CSS -->
<link rel="stylesheet" href="css/main.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="css/animate.min.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome icons -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="css/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- tempusdominus Bootstrap 4 Date and Time CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">
<style type="text/css">
.fc-title
white-space: normal !important;
h1, h2, h3, h4
font-family: 'Oswald', Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
.text-white
color: #5a5c69!important;
#search
border: 1px solid #5a5c69 !important;
@media only screen and (max-width: 767px)
.sidebar-brand img
width: 88px !important;
</style>
<!-- Laravel Full Calendar https://investmentnovel.com/laravel-full-calendar-tutorial-with-example/ -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
</head>
<body>
<div id="app">
<router-view></router-view>
<br>
<router-link :to=" name: 'home' ">Home</router-link>
<router-link :to=" name: 'about' ">About</router-link>
<router-link :to=" name: 'jobseekercreate' ">Job Seeker Create</router-link>
</div>
<script src="/js/app.js"></script>
</body>
</html>
单击“创建配置文件”按钮时的第二个错误是：
TypeError: Cannot read property 'experience' of undefined
不知道为什么，单击“创建配置文件”按钮后，我看到了我在 Vue 控制台的输入中输入的数据。见截图。
【问题讨论】：
【参考方案1】：因为你只在 laravel 路由中得到一个参数，所以它不会检测到它。您有两种解决方案，一种是接受所有参数，如下所示：
Route::get('/any?', function ()
return view('welcome');
)->where('any', '.*');
第二个是在这里使用后备路由更多细节https://laravel.com/docs/routing#fallback-routes
【讨论】：
好的，现在我知道了：405 Method Not AllowedThe POST method is not supported for this route. Supported methods: GET, HEAD.?
@Rayan Sacks 很好，发生此错误是因为您请求了错误的路线。检查网络选项卡，您将看到请求发送的位置可能是它在 uri 中忘记 / 的原因以上是关于在提交 Vue js 和 Laravel 时找不到 POST 404？的主要内容，如果未能解决你的问题，请参考以下文章
直接从 vue.js 中的 URL 加载页面时找不到 URL [重复]