transaction issue from one card (Vue App) to other card (in Laravel App)

Please I have an error in my Laravel app when I clicked on send(to send money from one card to another card using MySQL database) The app couldn't send the data:

Error message (Crl +i + shift):

xhr.js?b50d:177 GET http://localhost:8000/api/transaction/pubkey 401 (Unauthorized)

below my code of vue.js:

    <script>
import { JSEncrypt } from 'jsencrypt'
export default {
    data() {
        return {
            user: {},
            card: {
                code: null,
                key: null,
                amount: 0
            },
            from:{},
            to:{},
            amount: null,
            pubKey:"",
            error: false,
            errorMessage: ''
        }
    },
    mounted() {
        this.getUser();
    },
    methods: {
        getUser(){
            this.$http.post('http://localhost:8000/api/auth/me', 
            {},
            {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem("access_token")}` 
                }
            }).then(res => {
                this.user = res.data;
            })
        },
        test(){
            this.$http.get('http://localhost:8000/api/auth/test', 
            {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem("access_token")}` 
                }
            })
        },
        addCard(){
            this.$http.post('http://localhost:8000/api/card',
            {},
            {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem("access_token")}` 
                }
            }).then(response=>{
                this.card = response.data;
            });
        },
        sendMoney(){
            this.error = false;
            this.errorMessage = '';
            this.validate();
            if (this.error){
                return;
            }

            this.$http.get('http://localhost:8000/api/transaction/pubkey', 
                {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem("access_token")}` 
                }
            }).then(res => {
                this.pubKey = res.data;
                if (!this.pubKey) return; 
                this.encryptData();
                this.$http.post('http://localhost:8000/api/transaction/', 
                    {
                        from: this.from,
                        to: this.to,
                        amount: this.amount

                    },
                    {
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem("access_token")}` 
                    }
                }).then(res => {
                    console.log('sent');
                }).catch(err => {
                    this.errorMessage = err.response.data.error;
                    this.error = true;
                })
            })
        },
        validate(){
            if (!this.from.code) {
                this.error = true;
            }
            if (!this.from.key) {
                this.error = true;
            }
            if (!this.to.code) {
                this.error = true;
            }
            if (!this.to.key) {
                this.error = true;
            }
            if (!this.amount || this.amount <= 0) {
                this.error = true;
            }
            if (this.error){
                this.errorMessage = "check fields";
            }
        },
        encryptData(){
            let encryptor = new JSEncrypt();
            encryptor.setPublicKey(this.pubKey);
            this.from.code = encryptor.encrypt(this.from.code);
            this.from.key = encryptor.encrypt(this.from.key); 
            this.to.code = encryptor.encrypt(this.to.code); 
            this.to.key = encryptor.encrypt(this.to.key); 

            console.log(this.from, this.to);
            // encryptor.setPrivateKey();
            // console.log(encryptor.decrypt(secretWord));
        },
        getPubkey(){
            
        }
    },
}
</script>

my transaction function:

public function addTransaction(Request $request){
    $user = $this->user;
    $data = $this->decryptedData($request);

    // Check if auth user have card

    if ($user->card->code != $data['from']['code'] || $user->card->key != $data['from']['key']){
        return response()->json(['error' => 'Its not your card'], 401);
    }

    if(!$this->checkIfcardExist($data['to'])){
        return response()->json(['error' => 'Reciever card not found'], 401);
    }

    if($user->card->code == $data['to']['code'] && $user->card->key == $data['to']['key']){
        return response()->json(['error' => 'Very smart ... -_-'], 401);
    }

    if($user->card->amount < $request['amount']){
        return response()->json(['error' => "Your poor XD"], 401);
    }

    $transaction = [
        'from_id' => $this->getCardId($data['from']),
        'to_id'   => $this->getCardId($data['to']),
        // 'amount'  => (float)$request['amount']
    ];

    Transaction::create($transaction);

    return $transaction;
}

I run my Laravel app via cmd: PHP artisan serve : http://127.0.0.1:8000 I run my xmapp for my SQL data base I run my vue app via cmd: npm run serve : Local: http://localhost:8080/

I can add new user form vue app to the data base , but the only this not working is the transaction function

any idea for this issue?