What could be causing the error when trying to use a PUT request with fetch in Vue?

Whenever I attempt to send a PUT request, an error pops up on the console.

export function putUserData() {
    fetch(`${url}/user/${getCookie("ID")}`, {
        method: "PUT",
        headers: {
            "Authorization": `Bearer ${getCookie("TOKEN")}`
        },
        body: JSON.stringify({
            "first_name": userData.value.first_name,
            "middle_name": userData.value.middle_name,
            "last_name": userData.value.last_name
        })
    }).then(response => {
        if (response.ok) {
            return response.json()
        }
        switch (response.status) {
            case 400:
                console.log("Incorrect data");
                break;
        }
    }).then(data => {
        router.push("/auth");
        console.log(data);
    }).catch(err => {
        console.error("Cannot fetch" + err);
    });
}

Viewing the network request on the console:

An error message is displayed in the console:

I'm puzzled as to why it's failing to send a request, especially when post requests go through without any issues.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the most effective techniques for utilizing JavaScript modules in both the Server and Browser environments?

Currently, I am in the process of developing a JavaScript project that utilizes NodeJS. There are certain objects that need to be shared between the client and server side. I attempted to employ the module system in Node, but struggled to find an appropria ...

Client-Specific User Portal

Looking for some support on the back end of things. We are in the process of creating a portal where users will be directed to their specific landing pages upon logging in, providing access to files they have signed up for. Our team is exploring the use ...

Can the order of React lifecycle events be reliably predicted across different components?

Is there a clear documentation on the guarantees of React lifecycle order across separate components? For instance, if I have: <div>{ x ? <A /> : <B /> }</div> When x changes from true to false, one component will unmount and the ...

Navigating Cross-Origin Resource Sharing (CORS) Challenges within

Currently in the process of developing an API utilizing our API server script and attempting to establish communication with the API on the IONIC framework application. Progress is being made, however, encountering a recurring issue with the cross-origin b ...

Failed Azure Pipeline due to the absence of the vueapp.key file during the npm run build process

I'm encountering issues while trying to build a Vue app in Azure pipelines. I lack experience with NodeJS and Vue, so I'm unsure about what it requires. My application builds and runs smoothly locally. Any guidance would be highly appreciated. I ...

What causes Vue to drop nested component data within a v-for loop?

Witness the mysterious behavior through my fiddles: Anticipated outcome: https://jsfiddle.net/o7c9mwzf/27/ By clicking "unshift," I add an element to the beginning of my items array. After setting its data, clicking "unshift" again should maintain the el ...

Automatically compute and convert currency formats using JavaScript

May I ask again? Hopefully you understand. I am looking to automatically calculate with a money format. Here is a demo: https://jsfiddle.net/xp4ky2gg/ This is my code... HTML code <table style="width:100%"> ...

What is the best way to display a nested JSON object structure?

{ "Title": "Jurassic Park", "Year": "1993", "Rated": "PG-13", "Released": "11 Jun 1993", "Runtime": "127 min", "Genre": "Action, Adventure, Sci-Fi", "Director": "Steven Spielberg", "Writer": "Michael Crichton, David Koepp", "Actors": "Sam ...

Lustrous Layout

I am developing a mobile app using titanium where I have a scroll view containing objects that occupy 25% of the screen width. I am attempting to create a 'table' layout with these objects, having 4 columns and multiple rows. Is there a way for t ...

An issue occurred during the component import process in Vue.js

Perhaps it's just a small error. As someone new to this field, I'm encountering a Syntax Error with Unexpected Token in this section: component: () => import('@/layouts/default.vue'), Any idea what might be causing this issue? ...

Observing attribute changes in AngularJS directives

How can AngularJS observe attributes on a custom directive to bind Angular values? Here is my current progress: <tile title="Sleep Duration" data-value="{{sleepHistory.averageSleepTime}}"/> app.directive('tile', [function() { return ...

The file could not be located on the server during the project build and upload process

Presently, I'm engrossed in a project involving Angular 9 and ASP Core 3. You can find the website at: Nevertheless, encountering an error when trying to access this URL: http://mag-testcpl.astromap.ir/assets/vendors/global/toastr.css The culprit ...

Tips for merging two applications into a single file using Node.js

This code snippet represents the functionality of my chat application. var worker = function(worker) { var http = require('http'); var fs = require('fs'); var app = http.createServer(function(request, response) { f ...

The jQuery event listener for clicking on elements with the class "dropdown-menu li a" is not functioning properly

I've been attempting to implement a dropdown menu using Bootstrap that displays the selected option when a user clicks on it. However, I'm encountering issues as the breakpoints set within $(document).on("click", ".dropdown-menu li ...

Retrieving the attributes of a JSON object based on their names

I'm currently working on storing video information using JSON. I've managed to successfully read the JSON file, but I'm facing some challenges when trying to access the properties of the object. Specifically, I'm struggling with accessi ...

Using regular expressions to replace strings in JavaScript

I have a URL that resembles the following http://localhost:12472/auctions/auction-12/lots/sort/something/12 I am looking to switch it out with this new URL http://localhost:12472/auctions/auction-12/lots/sort/somethingelse/12 Here, somethingelse can be ...

Tips for making Ajax crawlable with jQuery

I want to create a crawlable AJAX feature using jQuery. I previously used jQuery Ajax on my website for searching, but nothing was indexed. Here is my new approach: <a href="www.example.com/page1" id="linkA">page 1</a> I display the results ...

Default modal overlay closure malfunctioning; encountering errors when manually managed through jQuery

A custom overlay has been designed and implemented. <div class="overlay modal" id="11"> <div class="background-overlay"></div> <div class="description"> <div class="hidden-xs"> <img src=' ...

Utilizing jQuery to send multiple values via an ajax request

I am looking to modify this script to send multiple values using AJAX instead of just a single value. files.php $(".search_button").click(function() { var search_word = $("#search_box").val(); var dataString = 'search_word='+ search_word ...

In JavaScript, generate a new column when the text exceeds the height of a div

Is it possible to create a multicolumn layout in HTML that flows from left to right, rather than top to bottom? I am looking to define the height and width of each text column div, so that when the text overflows the box, a new column is automatically ge ...