Troubleshooting 404 Error When Using Axios Put Request in Vue.js

I'm trying to update the status of an order using Axios and the Woocommerce REST API, but I keep getting a 404 error. Here's my first attempt:

axios.put('https://staging/wp-json/wc/v3/orders/1977?consumer_key=123&consumer_secret=456', 
{status: "completed"});

And here's my second try:

axios.put('https://staging/wp-json/wc/v3/orders/1977?consumer_key=123&consumer_secret=456/', 
{"Content-Type": "application/json", status: "completed"});

This is what the API documentation suggests:

curl -X PUT https://example.com/wp-json/wc/v3/orders/727 \
    -u consumer_key:consumer_secret \
    -H "Content-Type: application/json" \
    -d '{
  "status": "completed"
}'

Can anyone spot where I might be going wrong? Any advice would be greatly appreciated...

Answer ā„–1

While I'm not a professional in this field, it seems that the -u option in curl is used for authentication purposes.

If you want to learn more about cUrl's option ā€œ-uā€, you can visit this link.

If you're working with Basic authentication, you might want to consider trying the following example code snippet.

Please ensure to substitute "123" and "456" with your own login credentials.

axios.put('https://staging/wp-json/wc/v3/orders/1977', 
{
    status: "completed"
},
{
    headers: {
        Authorization: "Basic " + btoa("123" + ":" + "456")
    }
});

Before proceeding, make sure you have:

  1. Included the domain in the URL

  2. Eliminated any sensitive information from the URL

  3. Verified that an order exists for the specified ID

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 is the best way to transfer values or fields between pages in ReactJS?

Is there a way to pass the checkbox value to the checkout.js page? The issue I'm facing is on the PaymentForm page, where my attempts are not yielding the desired results. Essentially, I aim to utilize the PaymentForm fields in the checkout.js page as ...

The code is functioning properly, however it is returning the following error: Anticipated either

Can you explain why this code is resulting in an unused expression error? <input style={{margin:'25px 50px 0',textAlign:'center'}} type='text' placeholder='add ToDo' onKeyPress={e =>{(e.key ==='En ...

Detecting the specific number of digits before and after the decimal point in a Vuetify form number input can be achieved by utilizing

I am looking to only allow decimal and floating-point numbers as input. The restrictions are set to a maximum of 5 digits before the decimal point and a maximum of 2 digits after the decimal point. Initially, the rules were defined as follows: priceRules: ...

Steps to set up datetimepicker with varying date ranges for several input fields

I am having trouble getting a new date range for each text box in my form. It seems to only return the date range from the last textbox, even though I have made the textbox IDs dynamic. I have both start and end dates for each textbox and I have calculated ...

The successful execution of one promise determines the outcome of the $q.all promise

I am currently dealing with a situation where I have three nested promises that I need to refactor into a single $q.all call. The current structure of the code looks like this: ds.saveData(data).then(function (result1){ someOtherVar = result1.Id; ...

Include scrollView on smaller screens based on conditions

While incorporating an overlay in my application, how can I integrate a ScrollView specifically for smaller devices? Initially, I am checking the width: const windowWidth = Dimensions.get("window").width; Subsequently, I am attempting to display the Scro ...

Embed the AJAX response into HTML format

I am facing a challenge with rendering an AJAX response in an HTML structure within a PHP file. The issue is that the AJAX response contains multiple data objects, and each of them needs to be placed in specific locations within the HTML. For example, let ...

Upon attempting to open Google Maps for the second time, an error message pops up indicating that the Google Maps JavaScript API has been included multiple times on this page

Currently, I am utilizing the npm package known as google-maps and integrating it with an angular material modal to display a map. However, upon opening the map for the second time, an error message is triggered: You have included the Google Maps JavaScri ...

Using Typescript to remove an element from an array inside another array

I've encountered an issue while trying to remove a specific item from a nested array of items within another array. Below is the code snippet: removeFromOldFeatureGroup() { for( let i= this.featureGroups.length-1; i>=0; i--) { if( this.featureGr ...

What is the process for connecting an event to the <body> element in backbone.js?

Could it be done? For example, like this: ... interactions { 'click button' : 'performAction' } ... ...

Pixel information from previous canvas remains intact post resizing

I have crafted a canvas and loaded pixel data at specific locations using the following code snippet. let maskCanvas = document.createElement("canvas"); let patchWidth = 30; let patchHeight = 30; let scale = 3; maskCanvas.setAttribute("class", "mask"); ...

Retrieve information from a JSON file according to the provided input

Can someone help me fetch data based on user input in JavaScript? When the input is 'Royal Python', I'm supposed to retrieve details about it. However, the code provided gives an error stating 'The file you asked for does not exist&apo ...

Encountering npm error code 1 during npm installation in a Vue.js project

Recently, I installed VueJS Material Dashboard (with Laravel), but encountered an issue with the npm install command on this VueJS template. The error message displayed was related to gyp and python39. Even when running the node.js command prompt as admini ...

Flipping the camera rotation matrix in three.js

I am struggling with a scenario involving objects and a camera being controlled by a trackball. Whenever I add a new object to the main object, I want it to maintain its original orientation regardless of how the camera has moved around. For instance, with ...

What is the best way to extract the .text(data) value and use it within a conditional statement?

My goal here is to create a function that disables a button if a username exists, and enables it if the username is available. I'm not very experienced with JavaScript/jQuery, so I could use some help. Any assistance would be greatly appreciated: $(& ...

Convert a two-column layout on the web into a single-column layout for mobile devices, featuring dynamic

Is there a way to style this diagram with CSS that will work on IE11 and all major browsers? It seems like Flexbox doesn't support dynamic height. Do I need separate left and right columns for larger viewports and no columns for smaller viewports? ...

Displaying an iframe in Internet Explorer

My current setup involves a button that triggers the loading and printing of a report within an "invisible" iframe enclosed in a div. This process allows users to print the report from a different page without any visual disruption or changing pages, aside ...

hiding a dropdown menu in vuejs when clicking outside of it

Utilizing dropdown menu components in vuejs to create a standard dropdown menu. The code for the dropdown component is as follows: <template> <span class="dropdown" :class="{shown: state}"> <a href="#" @click.prevent="toggleDro ...

Utilize a function from another component

Is there a way to access a function inside main.js using a button in navbar.js to open a drawer that is located within the main.js component? Do I need to utilize Redux for this task? <Navbar /> <main /> navbar.js <Button type="default ...

What's the best way to make a toast notification appear when an API call is either successful or encounters

Seeking guidance on incorporating toast messages within an Angular + Ionic 6 application... My goal is to display a toast message in response to events such as clearing a cart or submitting an order, with the message originating from an API call. While a ...