axios encountering a 400 bad request error during the get request

I've hit a roadblock for some time now while trying to make a call to my API to fetch data using the GET method. I keep getting a 400 bad request error in Postman, even though I am able to successfully retrieve the data with a status code of 200. I have double-checked that I am passing all the necessary parameters and headers correctly in my Axios code.

A snippet of the Axios code showing the 400 status error:

async getAssociatedPlant() {                
                this.$axios.$get('lnk/plant/plants', {
                    headers: {
                        "Content-Type": "application/json",
                    },
                    params: {
                        link: "good",
                        plant_id: this.plantActive.id,
                    },
                    
                })
                    .then(response => {
                        console.log(response) 
                    }).catch(error => {
                        console.log(error)
                    });
            },

Image links for better understanding :

Postman Headers status 200 OK

Postman Params status 200 OK

Error 400 Bad Request

Request Payload

Request Response

Answer №1

Consider enhancing your request configuration by including data:{}.

async retrievePlantDetails() {
    this.$axios.$get('lnk/plant/plants', {
        headers: {
            "Content-Type": "application/json",
        },
        data:{},
        params: {
            link: "good",
            plant_id: this.plantActive.id,
        },

    })
        .then(response => {
            console.log(response)
        }).catch(error => {
            console.log(error)
        });
}

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 causes objects to be added to an array even when the condition is not met?

In the process of creating a terminal game using node.js, I am developing a random field consisting of different elements such as hats, holes, and pathways. The player's objective is to navigate through the maze and locate their hat within the field. ...

Blurring isotopes within Google Chrome

While working with isotope in Google Chrome, I noticed that all items have the following CSS code: -webkit-transform: translate3d(properties); In Chrome, every even element [2,4,6,8,10,12,14...] appears blurred, whereas in Firefox everything looks normal ...

Struggling to interpret JSON data from an AJAX call using jQuery in a Python/Flask application

Currently, I am attempting to analyze a POST request sent via AJAX using jQuery in a python script. The structure of the request is as follows: request.js function get_form_data($form){ var unindexed_array = $form.serializeArray(); var indexed_ar ...

How to reposition the Bootstrap navbar Logo from the left to the center

I am looking to change the ordering of Bootstrap 4 Navbar. Currently, the logo is on the left side, but I want it in the center with menus on both sides. Can someone help me with changing this order? Check out the current Navbar layout below: <nav c ...

Using AngularJS to pass objects dynamically through ng-include

Below is an example that is fully functional, except for one issue. When using node.title within the HTML code, everything works as expected. However, when trying to use {{node.title}} within the ng-include file, it does not function properly. Only the g ...

Learn how to incorporate a consistent header and footer across multiple pages on a website with Node.js, ExpressJS, and either hbs or ejs templates

Creating a common header (navbar) and footer page to be included in multiple/several pages of a website. I want to create a dynamic website using Node.js and Express.js. The code for the navbar and footer will be placed in a common file named header.html ...

Change from one value to another using a decaying sinusoidal wave

Can someone help me come up with a formula that will smoothly transition from a starting value to an end value over a specified time using a Sin or Cos wave? I'm attempting to replicate a bouncing effect like the one shown in my sample using CSS and ...

Free up MySQL connections within a Promise.All implementation

At the moment, I am facing issues with releasing MySQL connections from a connection pool. Interestingly, when I release connections in a synchronous "for" loop, everything works fine. However, when I attempt to release them asynchronously using Promise.Al ...

Using php variable to pass data to jquery and dynamically populate content in jquery dialog

I am facing challenges trying to dynamically display MySQL/PHP query data in a jQuery dialog. Essentially, I have an HTML table with MySQL results. Each table row has an icon next to its result inside an anchor tag with the corresponding MySQL ID. echo &a ...

React Ant Design: Toggle Visibility of Columns

Seeking a method to toggle the visibility of columns for the Table Component in Ant Design. The goal is to include a checkbox next to each column name. When unchecked, the column should be hidden. In my previous experience with react-table, accomplishing ...

Invoking an *.aspx method from an external HTML file

Greetings, I am a newcomer to the world of web application development. I have successfully created an *aspx page that communicates with a webservice through a method returning a string. My next goal is to invoke this aspx method from a remote HTML 5 page ...

Incorporate classes into span elements with Vue 3 on click event

In order to add a class to the element when clicked, you can use the span element as a checkbox. However, there seems to be an issue with selecting multiple elements at once <div v-for="(item, index) in listTimes"> <span class="ch ...

Disappearing a menu list while zooming in on a page: The art of vanishing navigation

[QUESTION] Is there a way to make the Menu List disappear when zooming in on a webpage? For example: <-- Normal Page [No Zoom] --> [Logo] Profile Gallery Guestbook <-- Zoom In 120% --> [Logo] Profile Guestbook <-- Zoom In 150% --> ...

Displaying the API request using the UseEffect API is not working upon the page

Sorry if this question has been asked before, but I’m really stuck on this small bug. I’m trying to display a collection of tweets from Firestore when the page loads, but currently it only works after a post request. Here’s my code: useEffect(() ...

Adapt the class based on different string inputs

I am facing a challenge where I need to dynamically change the div class based on a variable value. The issue is that the variable can have multiple values that should all be considered as true in my case. isActive: "yes" These values can include: "true" ...

Querying two MongoDB collections simultaneously to locate a user based on their email address

I am working with two different collections, tutors and users, within my MongoDB database. Within the controller, I have a function called signin. In this function, I need to modify the condition so that it searches for a user in both the tutors and users ...

Class does not have the capability to deserialize an array

I encountered this issue with my code (see image): https://i.sstatic.net/QxI0f.png Here is the snippet of my code: function CheckLoginData() { var user = []; user.Email = $("#tbEmail").val(); user.Password = $("#tbPassword").val(); $.ajax({ type ...

What are the best practices for storing an array of objects in MongoDB with Mongoose?

For my project, I needed to store data in a mongoDB document as an array of objects using Javascript, Node JS, Express framework, and Mongoose library. After researching online, I found two different methods to achieve this: Creating another sub-schema ...

The best way to focus on ESNext modules in Nuxt

I need to configure ESNext modules in my Nuxt application, but I haven't been able to find any information on how to do it. Can anyone provide guidance on this? https://i.stack.imgur.com/qvKZd.png For more context, please check out: https://github.c ...

Converting Laravel variable into an image using JavaScript

I have a base64 string that I'm passing from the controller to the view. After verifying that the base64 string is correct online (by converting it to an image), I am attempting to call it in my JavaScript like so: <script> var crosshairImg ...