Error 404 when using axios.post in .vue file to store product on Laravel Framework

I'm using ProductUploader.vue on Laravel Framework to create the form that allow user to see photos of product and be able to select multiple photos at a time. The problem occurred when I'm using 'axios.post' in ProductUploader.vue. It return Error 404 Not Found when return to http://localhost/products instead of http://localhost/travel-with-us/public/products.

Here is my Code in ProductUploader.vue

<div class="row justify-content-center">
    <div class="col-md-12">
        <div class="card-header font1 font-size2">Add Product</div>

        <div class="card-body font3">
            <form class="vue-form" @submit.prevent="submit">
                <fieldset>
                    <div class="form-group row rounded">
                        <label class="col-md-4 col-form-label text-md-right" for="product_name">Product Name<span style="color: red;">*</span></label>
                        <input class="col-md-6 form-control" type="text" name="product_name" id="product_name" required v-model="product_name">
                    </div>

                    <div class="form-group row rounded">
                        <label class="col-md-4 col-form-label text-md-right" for="product_details">Product Details</label>
                        <input class="col-md-6 form-control" type="text" name="product_details" id="product_details" v-model="product_details">
                    </div>

                    <div class="form-group row rounded">
                        <label class="col-md-4 col-form-label text-md-right" for="product_price_per_unit">Price Per Unit<span style="color: red;">*</span></label>
                        <input class="col-md-6 form-control" type="number" name="product_price_per_unit" id="product_price_per_unit" required v-model="product_price_per_unit">
                    </div>

                    <div class="form-group row rounded">
                        <label class="col-md-4 col-form-label text-md-right" for="product_discount_percentage">Discount Percentage</label>
                        <input class="col-md-6 form-control" type="number" name="product_discount_percentage" id="product_discount_percentage" v-model="product_discount_percentage">
                    </div>

                    <div class="form-group row">
                        <label class="col-md-4 col-form-label text-md-right" for="product_photos">Image(s) (If Any)</label>
                        <input class="col-md-6 form-control" ref="photoUploadInput" type="file" multiple @change="handleFileSelect" accept="image/*" style="display: none;">
                        <div class="col-md-6">
                            <div class="flex justify-between items-center mb-6">
                                <div class="leading-tight">
                                    <div v-if="product_photos.length > 0">
                                        <p>Image Selected :  Image(s)</p>
                                    </div>
                                </div>
                                <button @click="clickInput" type="button" class="px-6 py-2 font-semibold rounded">Please Select Image(s)</button>
                            </div>
                            <div class="row justify-content-center" v-if="product_photos.length">
                                <div class="col-md-6 p-3" v-for="(photo, index) in product_photos" :key="`thumb-${index}`">
                                    <div class="row">
                                        <img class="object-cover" style="width: 50%;" :src="photo.preview" alt="Selected Image">
                                        <button @click="removePhoto(index)" type="button" class="rounded" style="width: fit-content; height: fit-content; margin-top: auto; margin-bottom: auto;">
                                            <i class="fas fa-minus" style="color: red;"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row rounded">
                        <label class="col-md-4 col-form-label text-md-right" for="tag_id">Tag<span style="color: red;">*</span></label>
                        <select class="col-md-6 form-control" name="tag_id" id="tag_id" required v-model="tag_id">
                            <option :selected="true" disabled value="0">Please Select Tag</option>
                            <option v-for="tag in tag_list" :value="tag.id"></option>
                        </select>
                    </div>

                    <div class="form-group row rounded">
                        <label class="col-md-4 col-form-label text-md-right" for="organization_id">Brand<span style="color: red;">*</span></label>
                        <select class="col-md-6 form-control" name="organization_id" id="organization_id" required v-model="organization_id">
                            <option :selected="true" disabled value="0">Please Select Brand</option>
                            <option v-for="organization in organization_list" :value="organization.id"></option>
                        </select>
                    </div>

                    <div class="form-group row rounded">
                        <label class="col-md-4 col-form-label text-md-right" for="main_type_id">Product Main Type<span style="color: red;">*</span></label>
                        <select class="col-md-6 form-control" name="main_type_id" id="main_type_id" required v-model="main_type_id">
                            <option :selected="true" disabled value="0">Please Select Product Main Type</option>
                            <option v-for="main_type in product_main_type_list" :value="main_type.id"></option>
                        </select>
                    </div>

                    <div class="form-group row rounded">
                        <label class="col-md-4 col-form-label text-md-right" for="sub_type_id">Product Sub Type<span style="color: red;">*</span></label>
                        <select class="col-md-6 form-control" name="sub_type_id" id="sub_type_id" required v-model="sub_type_id">
                            <option :selected="true" disabled value="0">Please Select Product Sub Type</option>
                            <option v-for="sub_type in product_sub_type_list" :value="sub_type.id"></option>
                        </select>
                    </div>

                    <div class="form-group row mb-0 justify-content-center">
                        <button @click="upload" type="button" :disabled="!product_name.length || tag_id == 0 || organization_id == 0 || main_type_id == 0 || sub_type_id == 0" :class="!product_name.length || tag_id == 0 || organization_id == 0 || main_type_id == 0 || sub_type_id == 0 ? 'cursor-not-allowed bg-gray-600 hover:bg-gray-600' : 'bg-indigo-500 hover:bg-indigo-600'" class="px-6 py-2 font-semibold rounded">Add Product</button>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

<script>
import axios from 'axios';
export default {
    props: ['tag_list', 'product_main_type_list', 'product_sub_type_list', 'organization_list'],
    data() {
        return {
            product_name: "",
            product_details: "",
            product_price_per_unit: "",
            product_discount_percentage: "",
            product_photos: [],
            tag_id: 0,
            organization_id: 0,
            main_type_id: 0,
            sub_type_id: 0,
        }
    },
    methods: {
        handleFileSelect(e) {
            Array.from(e.target.files).forEach(file => {
                const reader = new FileReader()
                reader.onload = () => {
                    this.product_photos.push({
                        preview: reader.result,
                        file
                    })
                }
                reader.readAsDataURL(file)
            })
        },
        clickInput() {
            this.$refs.photoUploadInput.click()
        },
        upload() {
            const dt = new DataTransfer()
            this.product_photos.forEach(photo => dt.items.add(photo.file))
            const fd = new FormData()

            fd.append('product_name', document.getElementById('product_name').value);
            fd.append('product_details', document.getElementById('product_details').value);
            fd.append('product_price_per_unit', document.getElementById('product_price_per_unit').value);
            fd.append('tag_id', document.getElementById('tag_id').value);
            fd.append('organization_id', document.getElementById('organization_id').value);
            fd.append('main_type_id', document.getElementById('main_type_id').value);
            fd.append('sub_type_id', document.getElementById('sub_type_id').value);

            this.product_photos.forEach((photo, index) => fd.append(`photo-${index}`, photo.file))

            console.log(document.getElementById('product_name').value);
            console.log(document.getElementById('product_details').value);
            console.log(document.getElementById('product_price_per_unit').value);
            console.log(document.getElementById('tag_id').value);
            console.log(document.getElementById('organization_id').value);
            console.log(document.getElementById('main_type_id').value);
            console.log(document.getElementById('sub_type_id').value);

            console.log(fd);
            axios.post('/products', fd, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            })
                // .then(response => console.log(response))
                .then(response => { 
                    // console.log(response); 
                    if(response.status === 200) {
                        window.location = '/products';
                    }
                })
                .catch(err => console.log(err))
        },
        removePhoto(index) {
            this.product_photos.splice(index, 1);
        }
    }
}
</script>

Here is my route in web.php

Route::resource('products','ProductController');

Any ideas why my code return Error 404? How can I fix this? If you have any ideas or want more information, please leave yours in the comment below. Thank you.

via Chebli Mohamed