Axios is repeatedly making GET requests to an incorrect endpoint

I have set up axios to make requests to my express backend hosted on localhost:8081

src/htpp/index.js

import axios from 'axios'

export default axios.create({
  baseURL: 'http://localhost:8081/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
})

In a vue component, I utilize this setup to send a post request with form data

src/components/create-list.vue

import http from '../http'

http.request({
  url: 'lists',
  method: 'post',
  data: {
    displayName: this.displayName,
    listName: this.listName,
    userEmail: this.userEmail
  }
})

However, upon form submission, the following unexpected request is made:

Request URL: http://localhost:8080/?list-name=Test&user-email=test%40test.de&user-name=Test

Expected Request URL : http://localhost:8081/api/lists

Expected Request Method : POST

Expected Request body : {"list-name": "Test", "user-email": "[email protected]", "user-name": "Test"}

Can someone help identify what is wrong in this situation?

Answer №1

After doing some investigating, I was able to identify the issue within my Vue component template. It turns out that a button was inadvertently submitting my form and triggering a GET request, even though it wasn't explicitly defined as a type="submit" button. To resolve this, I either had to prevent the default behavior of the click event or adjust the tag in order to solve the problem. Just wanted to note that I encountered this issue while using Chrome version 67.0.3396.99.

Answer №2

If you're having trouble importing your index.js file, consider trying this approach. Double-check that the path is accurate and also experiment with changing the variable name from 'http' to something else as suggested by Chad Moore.

import http from '../http/index'

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

Effortlessly move and release Internet Explorer

Encountering drag and drop issues in Internet Explorer and Safari, while functioning correctly in Firefox 15 (untested on other versions). Dragging and dropping items between dropzones works in Safari, but sorting does not. In Internet Explorer, nothing wo ...

Organizing a NodeJS module - properties and functions

I've been struggling to structure my NodeJS application with modules, and after hours of searching, I haven't found a definitive answer. Let's say I want to create a "user" module for creating new users in my code: var newUser = new User(); ...

Incorporate a vertical scrollbar in the tbody while keeping the thead fixed for smooth vertical scrolling

I'm seeking a solution to implement horizontal and vertical scroll for my table. Currently, the horizontal scroll is working fine, but when trying to add vertical scroll, the table header also moves along with it. Is there a way to keep the table hea ...

Issue occurs when nested functions prevent the data() variable from updating

As a newcomer to VUE, I may not be using the right terminology so bear with me. I'm attempting to update a variable that is defined in the script tag's "data()" function. The issue arises when trying to change the value of a variable within the ...

Update the default selection for all the VueJS Multiselect options

I am currently utilizing the vue-multiselect.js library (available at ). Currently, I am in need of translating all text to German. Right now, I am achieving this by using custom settings within the multiselect. <multiselect id="account-selected&q ...

What is the best way to sort the values of an associative array in JavaScript?

Consider the following associative array: array["sub2"] = 1; array["sub0"] = -1; array["sub1"] = 0; array["sub3"] = 1; array["sub4"] = 0; How can you efficiently sort this array in descending order based o ...

Guide to integrating Google Maps into your Vue application using vue2-google-maps

I have been trying to integrate vue2-google-maps into my app, but unfortunately, the map is not displaying as expected. Despite carefully following the documentation on how to use it, all I get is a blank white page instead of the Google Maps interface. St ...

Guide to utilizing element reference with material UI components in Angular

I am facing difficulty in accessing the reference of an element. My intention is to wrap the material UI elements within a div and set the opacity: 0 so that it remains hidden in the HTML, allowing me to handle the value in my component.ts file. The main g ...

JavaScript has encountered an Uncaught TypeError due to an illegal invocation

I am currently developing a lambda function that calls another function with specific parameters. While this code runs without issues in Firefox, it encounters an error in Chrome, displaying a strange message in the inspector: Uncaught TypeError: Illegal ...

Why won't my AngularJS checkbox stay checked?

In my application, I have the following code: <input type="checkbox" ng-checked="vm.eduToEdit.test" /> {{vm.eduToEdit.test}} <input type="checkbox" ng-model="vm.eduToEdit.test"> The value of vm.eduToEdit.test is displaying t ...

Incorporate a new node module into your Ember CLI application

I am interested in integrating the Node.js module https://www.npmjs.com/package/remarkable-regexp into my Ember-CLI project. Can someone guide me on how to make it accessible within the Ember application? I attempted to do so by including the following c ...

Maintaining the Syntax when Copying HTML to a Text Area

In my project, I rely on markdown for text editing. The markdown is converted to HTML and then stored in the database for display in the view. When users want to edit a post, the stored text is retrieved from the database and used as the initial value in ...

Failed jQuery AJAX request to database with no returned information

I'm really confused about where the issue lies :S The button triggers a function that passes the parameter "sex" and initiates an ajax call to ajax.php, where I execute a MySQL query to retrieve the results and populate different input boxes. When I ...

Is there a way to delegate properties in Angular 2+ similar to React?

When working with React, I have found it convenient to pass props down dynamically using the spread operator: function SomeComponent(props) { const {takeOutProp, ...restOfProps} = props; return <div {...restOfProps}/>; } Now, I am curious how I ...

Retrieve the Twitter user's profile picture

I am looking for a fast method to retrieve a Twitter profile image using either PHP or Javascript. My goal is to obtain the full image URL, not just the avatar size. Any code example would be greatly appreciated. Thank you! ...

What is the best way to display individual progress bars for each file uploaded using ajax?

Firstly, I want to express my gratitude for taking the time to read this. Secondly, I kindly ask you to revisit the title... I am not seeking assistance with a single progress bar as there is ample documentation available online for that. Instead, I am in ...

What is the process for the event loop moving into the poll phase?

There is a scenario outlined in the event loop explanation on the Node.js official website. When setTimeout is triggered, and the callback queue for the timer phase isn't empty, why does the event loop move on to the poll phase? The site mentions that ...

Guide to developing JavaScript code that moves information from one local website to a different one

Here's the scenario: You input text into a field on website A and click a button. Upon clicking that button, the entered text should appear in website B. I attempted to use localStorage for this functionality, but unfortunately it was not successful. ...

Assign a unique HTML attribute to a child element within a Material-UI component

Currently, I am trying to include the custom HTML5 attribute "data-metrics" in the span element within the ListItemText Material UI component. However, I am facing some difficulty achieving this as per the specifications outlined in the Component API Docum ...

Nuxt 3: Creating a Lifestyle Blog with Challenges in Loading Dynamic Content

Working on my Nuxt website, I have successfully created the homepage and blog page. However, when navigating to a specific blog post, the page is supposed to fetch the data using async from the store by passing the slug but sometimes an error occurs where ...