I'm using Vue.js and Laravel in combination with Axios to make a search filter for my records. When I make the request, I get the following error in my console.
GET http://localhost:8000/api/quests/search/?keywords=test 405 (Method Not Allowed)
Vue.js
export default {
data() {
return {
quests: [],
quest: {
id: '',
name: '',
price: '',
},
keywords: null,
}
},
watch: {
keywords(after, before) {
this.fetchSearch();
}
},
methods : {
fetchSearch() {
axios.get('/api/quests/search', { params: { keywords: this.keywords}}, {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})
.then(res => console.log(res.data))
// data empty
.catch(error => console.log(error));
}
}
API route
Route::get('quests/search', 'CrudsController@search');
Controller
public function search(Request $request)
{
$quests = Quest::where('name', 'like', $request->keywords)->get();
return QuestResource::collection($quests);
}
Network response
Cache-Control: no-cache, private
Connection: close
Content-Type: application/json
Date: Mon, 03 Dec 2018 16:08:05 +0000
Date: Mon, 03 Dec 2018 16:08:05 GMT
Host: localhost:8000
X-Powered-By: PHP/7.2.10
X-RateLimit-Limit: 60
X-RateLimit-Remaining: 58
What am I doing wrong here?
You might be missing csrf token.
Try adding it to your header
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
Or you could alternatively exclude this route vie adding it to $exclude array on csrf middleware.