I’ve made a Laravel SPA application with Vue and Laravel Sanctum, but every time I do a POST request with axios I get a 419 error code (CSRF code mismatch). My bootstrap.js window._ = require(‘lodash’); window.axios = require(‘axios’); window.axios.defaults.withCredentials = true; window.axios.defaults.headers.common = { ‘X-Requested-With’: ‘XMLHttpRequest’, ‘X-CSRF-TOKEN’: document.querySelector(‘meta[name="csrf-token"]’).getAttribute(‘content’), }; axios.get(‘/sanctum/csrf-cookie’).then(response => { console.log(response); axios.post(‘/api/auth/login’, this.fields).then(response ..
Category : axios
I am trying to use bootstrap collapse (https://getbootstrap.com/docs/4.1/components/collapse/) in v-for div… My question is: How to open just one div that was clicked, not all divs? (Problem is that when I click one button, all the divs are opening, so I tried v-bind:id="status.id", but something is not good…) My code is here: <template> <div class="container ..
I am using Laravel 7 with Vue and Axios and I have run across this error but cannot seem to find out why I am getting it. I am using api routes in my Laravel app for contacts, No Controller and One Contacts Model. I have one vue component named Contacts.vue. When trying to fetch ..
I have an hybrid vuejs app, that is working correctly on the web version, but that is getting 419 from the Laravel server when calling it from the Android version. AXIOS CALL vm.axios.get(‘/sanctum/csrf-cookie’).then(response => { vm.logging = true; vm.axios({ method: ‘POST’, url: ‘/api/login/employee’, data:{ email: vm.email, password: vm.password }, }).then(function (response) { console.log(response.data) if(response.data.success){ vm.axios.defaults.headers.common[‘Authorization’] ..
I have a tinay app created in Vue.js and laravel, and wanted to check how it would work on Android by using Capacitor. The app loads correctly in Android Studio, however, every axios call I make, it fails, although it works correctly in the web version. I also tried debugging the network calls in Android ..
I have a tinay app created in Vue.js and laravel, and wanted to check how it would work on Android by using Capacitor. The app loads correctly in Android Studio, however, every axios call I make or image that I try to load from a http source, it fails, although it works correctly in the ..
I Laravel 8.x app where the API endpoints have broken for some reason and are now returning the wrong response type. They were working fine previously and nothing has changed in the source code. The API request: axios.get(`/${this.model}/emptyTopics`, { params: params }) .then(r => { if(r.status == 200 || r.collection.length) { this.emptyTopics = r.data.collection; this.emptyTopicsDataTable.loadingVal ..
I am using vuex to store state, and I’m seeing an odd problem: it seems that it is changing the id on one of my objects. In my action, I download information about a note saveNote({commit}, noteInfo) { var formData = new FormData(); Object.keys(noteInfo.note).forEach(key => formData.append(key, noteInfo.note[key])); return axios.post("/notes/saveText/" + noteInfo.note.id, formData).then(res => commit(‘SAVE_NOTE’, res.data)).catch(err ..
I am using Laravel and Vue.js I want to list all comments below certain status when certain status is loaded. That means I want to get all comments via resource with loaded status. Everything I expected works fine-comments are listed, but then I have another problem. I test my app again and when I try ..
I’m using Laravel’s Sanctum library to authenticate my API, but it just doesn’t work and everything seems on purpose. I’m creating a token after someone authenticates, and it goes into personal_access_token table in database. And then I insert the token into metatag. Then I retrieve the content of the metatag with default javascript (it works) ..
i’ve been trying to upload a profile image with Vue and Laravel but i just can’t get it working. I have a form: <form v-on:submit.prevent="handleEdit()" enctype="multipart/form-data"> i have a v-model for the name(onoma) and last name(epitheto), and that’s the image upload input <input type="file" id="image" @change="previewImage" accept="image/png, image/jpeg" name="image" class="input-file"> Vue: data() { return { ..
Im using laravel as backend and also have a form with some upload inputs that user must use to upload some documents, most of the times everything works perfectly, but sometimes some of the uploaded documents are empty, like 3 normal and 1 empty! form has different sections and thats why im using axios to ..
I’m using Sanctum, Laravel’s API guarder to protect my API. When I set Bearer Token as global header to Axios, it works great – except one thing. If I set the token like this: Bearer 6|yqbIUsP6Q6U6t7TWHUlk45w9JmiTUdsJvF6R5UGu, it works great. I get the token from metatag in the head. But that token is not encrypted and ..
I’m using Sanctum, Laravel’s API guarder to protect my API. When I set Bearer Token as global header to Axios, it works great – except one thing. If I set the token like this: Bearer 6|yqbIUsP6Q6U6t7TWHUlk45w9JmiTUdsJvF6R5UGu, it works great. I get the token from metatag in the head. But that token is not encrypted and ..
i’m working on an laravel vuejs spa. I try to update a post from the admin. I send the form datas on creating a new FromData who are sending with and axios request. But the controller send me the error: message: "The given data was invalid." errors: {name: ["The name field is required."], description: ["The ..
i am trying to submit empty form but validation is not working and i am getting error on response please help me how can i resolve this issue using axois Does anyone have an idea please help me thanks. getting error {"message":"The given data was invalid.","errors":{"name":["Name is required"],"email":["Email is required"]}} controller public function store(Request $request) ..
today I asked myself this question: How to secure my API routes? I explain to you because I did not find a post here. So in fact I am using laravel + vuejs. I use laravel for auth, controllers, models and some views. My routes for the blades / controller files are in routes-> web.php ..
In my controller public function getpayrollID($id) { $fetch2 = DB::table(‘payroll_details’)->where(‘payroll_daily_id’,$id) ->get(); foreach($fetch as $payrollID){ $payroll_id = $payrollID->payroll_daily_id; } } public function payroll($id,$payroll_id) { $fetch = DB::table(‘payroll_attendance’)->where(‘wrk_id’,$id) ->where(‘payroll_daily_id’,$payroll_id) ->select(DB::raw(‘count(wrk_id) as totattn’)) ->get(); return $fetch; } may route in web.php Route::get(‘api/payroll_date/{id}’,’APIpayrollC[email protected]’); Sourc..
I’ve a backend app working with Laravel 7 and a frontend which works with VueJs. My Laravel app is running on laradock (nginx, postgres etc…) Using Postman the API (Laravel 7) works properly. This API replies by dns or by ip. http://192.168.0.3:80/api/mobile or http://laraapi.com/api/mobile Once I’m still developing the VueJs app I’m running it with ..
I’m trying to get the specific product based on the slug, but when I try to send an Ajax request to my API powered by Laravel it does not work. I’ll paste the code here. this.$axios.$get(this.$axios.defaults.baseURL + ‘/api/products/’ + this.$route.params.slug) .then(response => console.log(response)) .catch(error => console.log(error)); I can get the data using tools like Postman, ..
I am using Axios from Vue to make a simple GET request to Laravel 8. But I am getting a 404 that I do not understand. My welcome.blade.php: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> </head> <body> <div id="app"> </div> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="/public/app.js"></script> </body> </html> My Laravel ..
I have problem with axios interceptors. I try set header for jwt using interceptors but nothing work so I changed my code and added only console.log to this code. When I open console in Chrome nothing is displayed. Do you have any idea what the problem could be? import axios from ‘axios’ const baseURL = ..
trying to fetch data returnd my url in axios function. but the data is not showing up. console.log return data with this format this is my code <tbody> <tr v-for="val in values"> <td style="width: 25%" class="text-center">{{ val.id }}</td> <td style="width: 25%" class="text-center">{{ val.value }}</td> <td style="width: 25%" class="text-center">{{ val.price }}</td> <td style="width: 25%" class="text-center"> <button ..
I try to access my Laraval API from my Vue SPA but everytime I do a request I get a 401 Unauthorized. I have tried the answers from multiple SO questions but nothing works. I added the EnsureFrontendRequestsAreStateful to the API middleware. I set the Valet domain that I use for SANCTUM_STATEFUL_DOMAINS=goya.app. I set the ..
I am trying to sending data to the controller via Axios react-laravel here is my code: ` **laravel Route:** json(“hello”); } } **react component :** import React, {useState}from “react”; import axios from “axios”; const AddContact = () => { const [data,setData]=useState({ name:””, mobile:””, email:””, msg:”” }); const InputEvent=(event)=>{ const {name,value}=event.target; setData((preVal)=>{ return{ …preVal, [name]:value, }; ..