Questions tagged [axios]
Axios, a JavaScript-based Promise-driven HTTP client, serves as an excellent tool for both front-end and Node.js back-end development in any application.
Trying to initiate multiple axios operations simultaneously to fetch data from various sources at once using a loop leads to the received data getting intermingled and corrupted. Even creating distinct axios instances for each data source doesn't seem to ...
I am currently working on a Vue.js application that operates solely on the frontend with no server involved. The app sends multiple requests to various APIs, resulting in its complexity increasing over time. Unfortunately, some of these APIs pose problems ...
I have a code snippet that requests data from an external API using axios and I want to incorporate the response into my rendered page. Here is my code: //Snippet from my controller required in main routes exports.recordBySlug = async (req, res, next) =&g ...
Can Someone assist me please? I'm having trouble creating a website similar to YouTube and encountering the following error: GET http://localhost:3000/search 404 (Not Found) Uncaught (in promise) Error: Request failed with status code 404 at createError ( ...
I have a setup with a react frontend and node.js backend. Currently, I am successfully sending a POST request using axios: const [logins, setLogins] = useState({}); function updateLogins(e) { setLogins({...logins, [e.target.name]:e.target.value} ...
Having trouble with my Vue and Laravel Spa setup using Sanctum. When sending requests through axios, I keep getting a status of 204. When trying to retrieve user information, I'm getting an Unauthenticated error message. Not sure what's going wro ...
Looking for some assistance. I have a React app where I am sending a 'get' request to an NFL API using axios, and then displaying the response on my webpage. My goal is to only display players who hold the positions of QB, RB, or WR. I don' ...
There is an issue I am facing while trying to retrieve an image from the website www.thispersondoesnotexit.com. function getImage() { axios({ method: 'get', url: 'https://www.thispersondoesnotexist.com/image' }).then(res => { ...
When using axios, I am receiving an API response. To send the sorted API response based on name, I use the following endpoint: http://localhost:8000/api/ingredients/ordering=name The actual object received from my server looks like this: { 2:{"id":2 ...
My b-table is filled with data from an API hit through Swagger UI, and since there's a large amount of data, I need the search button at the center top of the page to work properly when inputting store code or branch. https://i.stack.imgur.com/l90Zx.p ...
I am currently using fetch to send a POST request and retrieve data from an API on the server side (using nextjs 13 + node 18). Interestingly, I can successfully retrieve the data using postman and axios, but not with fetch. Below is the snippet of code ...
Within my NextJS Application, I have a dedicated APIService.js file that serves various purposes, with the primary function being to set the BASE_URL and handle user authentication (checking for a token in either cookies or headers and dispatching it into ...
Implementing JWT for protecting a post route in my nodejs, express, react application has been quite a challenge. While testing with postman and adding the JWT token to the headers works flawlessly to add users to the database, I encounter a 401 response ( ...
Vuejs is my go-to frontend framework for building projects. When creating a component called ('TimeCapsy.vue'), I initiate an AJAX call to the backend in this manner: created: function () { if (verify.verify_login()) { let tok ...
Hello partners! I'm collaborating with stackOverflow to develop a module using Laravel for the backend and Vue.js for the frontend. Currently, I am facing an issue where the controller is not receiving values from the form when creating a new entity. ...
I've set up basic authentication, which is working fine in my localhost environment. However, when I try to run the same setup in production, the registration process works but the cookie isn't getting assigned to the client site. Client side: functions ...
Find the code on github: https://github.com/aurora10/amazone-clone.git Attempting to use Axios to communicate with an API is resulting in the following error: The console shows a NUXT SSR error: TypeError: Cannot read property '$get' of undefined at asy ...
Implementing token-based authentication and sending urlencoded data via axios. Passing the user and password to the axios function with all parameters set as per documentation. import axios from 'axios' const params = new URLSearchParams() param ...
//search.js file import axios from "axios"; export function storeInput(input, callback) { //input = document.getElementById("a").value; let result = []; console.log(input); if (!callback) return; axios.post("ht ...
Just starting out with React. Managed to create a table component with hard-coded data. However, I now have all the data stored in table.json. Can someone guide me on how to fetch values from table.json using an axios get request an ...
I am looking to create a specific type for axios responses based on the status code: types: type SuccessfulResponseData = { users: .... }; interface SuccessfulResponse extends AxiosResponse<SuccessfulResponseData, any> { status: 200; } ty ...
My current challenge involves mapping an array of objects, which I retrieved from an axios.get request and then passing them as children to React components. The error message that's causing trouble for me reads as follows: An Error occurred: Objects ...
When using axios to make an API request, how can I receive data in XML format? For example: axios.get(/* URL */).then(response => {/* How do I retrieve the XML data? */}).catch(err => {/* result */}); ...
I have been working on organizing my code in Vuex actions to improve readability and efficiency. Specifically, I want to extract the axios call into its own method, but I haven't been successful so far. Below is a snippet of my code: async updateProfile({ ...
My expertise lies in creating API, BackEnd, and Frontend websites. For the API, I utilize Express, while for the BackEnd - FrontEnd, I rely on ReactJs. During local testing, everything functions as expected. However, upon deployment to the server, error ...
My current setup involves using Laravel for the backend and NextJs for the frontend. When I attempt to submit the form, I encounter an issue. The server responds with the following error message: error I have verified that the csrf token is correctly obt ...
I am looking to make a change in a function that currently returns an AxiosPromise. Here is the existing code: example(){ return api.get(url); } The api.get call returns an object of type AxiosPromise<any>. I would like to modify this function so ...
I am currently developing a website that showcases a range of products with dedicated product pages. However, I am facing challenges in determining the optimal sequence for loading data. While I could make an axios call and pass the data as a prop to subse ...
I'm currently facing an issue with posting data in a Vue application. Specifically, I am struggling with incorporating an image file input within the form. While most resources suggest sending the file separately or alongside other files,[1][2] What ...
I am struggling to understand the meaning of these errors. Below is the code for my component: import React, { Component } from 'react'; import { Text, View } from 'react-native'; import axios from 'axios'; class AlbumList extends Component { compone ...
As a React beginner, I am facing an issue with my input field filtering functionality. The problem arises when the results are filtered and rendered, as it seems to be ignoring the last character of the input value. For instance: If I type in "s", nothing ...
Currently, I am working on creating a basic axios call to communicate with a nodejs server from a react application in order to retrieve products stored in a mongoose schema model. The issue I am facing is that when the page initially loads, I can successf ...
I am currently working on a project using Vue and Nuxt.js. I am wondering if there is a way to cache an axios web service call for all clients. Specifically, I need to retrieve currency reference data and it seems inefficient for every client to make this ...
I have a collection of tags in an object, and I want to dynamically add new tags before submitting the form. Despite using vue watch, it doesn't seem to be working for me. Here is the code snippet: data() { return { blog: { blog_title: ...
I currently have a mobile app developed using the MERN stack that utilizes passportjs for user authentication and login (linked to a mongodb database via axios). However, I am facing an issue where I cannot associate the data/log entered by the user with t ...
My current project involves using React and Express on the backend, with Multer handling uploads. While my server side functions correctly when testing with Postman, I am encountering unexpected results when trying to upload an image from React. Despite su ...
As a developer using next.js, I am facing an issue with my code. I run a blog and need to search for a keyword in the titles of my posts. This excerpt shows part of my code: const [result, setresult] = useState([]); const [keyword, setkeyword] = useState ...
The image is successfully displaying in the Profile.js screen and other areas. However, when attempting to pass the image via useContext() to display in Navigation.js, it shows as src(unknown). What could be causing this issue? https://i.stack.imgur.com/w ...
I've run into an issue accessing the API as it has CORS disabled, requiring me to make requests on the server side. Currently, I'm using React and Axios to send a GET request to a local php file that should trigger cURL execution. However, instead of execu ...
I'm facing an issue with my dotnet core webapi backend and React TypeScript frontend. When I try to create a user through one of the endpoints, I keep getting 400 bad request errors in the browser console. Upon inspecting the network tab, I found that it's ...
Hello and thank you to those taking the time to read this. I am new to Vue, so I may be overlooking something obvious here, but after being stuck for several days, I am reaching out for help. In my SFC file, I have an onMounted function fetching data from ...
I am experiencing an issue with the filter I have: { "fields": {"goal":true,"amountPledged": true,"title": true},"where": {"title": {"like":`%${this.state.searchText}%`}} } The this.state.searchText value is bio. According to my understanding, it should ...
I'm currently facing an issue when trying to add a new user to my database using the axios post method. I have created a form with Material UI, and although there are no console errors or browser issues, I am unable to input text into the TextFields. Prio ...
I am puzzled. While running my .net core server and loading the vue project in the same file, I encounter partial success. However, when I start testing the axios/fetch requests, the test project fails in other ways. My CORS policy is set to be very lenie ...
I'm struggling to manage errors thrown in my SWR fetcher. Currently, whenever an error is thrown, my app stops working and I see an "Unhandled Runtime Error". What I've been doing is throwing the error inside the fetcher function. Here's th ...
class App extends React.Component { app: Application; ... componentDidMound() { axios.get(…).then(res => { this.app.currentUser = res.data.data; // setting value inside lambda function. console.log(this.app.currentUser); // ...
I am exploring the CryptoCompare API to retrieve cryptocurrency data. As a beginner with React, I have successfully used Axios for AJAX requests. However, I am facing challenges in accessing specific JSON elements. To view the JSON data structure, you can ...
I am encountering challenges while trying to implement a basic search feature on a JSON file obtained through an API. Each component works independently: I can successfully retrieve data from the API, perform searches on non-API data, and even search cert ...
Currently, I am in the process of developing a project that consists of a springboot backend and Vue frontend. At this point, I have successfully managed to retrieve a list of products from my database using GET requests. While I can display this list on a ...
I have implemented a basic login route in express: //login router.post('/login',async (req,res) => { try{ const user = await User.findOne({username: req.body.username}); console.log(user); if (!user) { ...
I am looking to efficiently transfer data from my blade.php file using axios (along with vue) to my backend. Inside blade.php function() { const fd = new FormData(); fd.append('a','b') axios.post('...', formd:fd); } Inside Controller ...
I followed the tutorial provided by HERE and successfully implemented the solution for street address validation using ReactJS and HERE geocoder autocomplete. Everything was working fine on Firefox and Chrome until a few weeks ago when it suddenly stopped ...
One issue I am facing is related to triggering my save method only when a checkbox is selected or true in Vue JS. I have no problem listing values and saving them to the database using axios, Vue JS, and Spring Boot. However, every time I click the checkbo ...
When utilizing axios, I receive my query response in the format of response.data.response.object. Is there a way to access the answer directly without going through response.data first? ...
I'm still getting the hang of Node, and I've run into an issue with passing request parameters using http-proxy-middleware. Every time I try, I keep getting a 404 error. This is my express listener setup: app.put("/api/markets/:id",()=>{..c ...
Within the UserLogin component, there is a submit button that triggers the following method: methods: { login() { this.$store .dispatch("login", { email: this.email, password: this.password ...
I am currently developing a full stack website with Flask, Vuejs and SQLite3. I have been using axios to make backend calls from the frontend. However, I noticed that when I make 'GET' requests using axios (Vuejs) to the backend on a particular route, all ...
Hey there, I'm currently diving into the world of react js and have been developing something that is working smoothly so far. However, I've noticed that my api calls are scattered throughout various components. This means that if I need to update the IP a ...
I'm currently learning Vue and facing an issue with fetching data from an API to my component. I have a service class that successfully retrieves data from the API, as the API itself is working fine. Here's the code snippet: import IReview from & ...
As a newcomer to react and node.js, I have set up a fake server running on port 5000 with an API (http://localhost:5000/getData) that contains a hardcoded array of objects. My goal is to add a new object to this API from my react frontend running on port 3 ...
Within my components, I am making an axios call. I have defined two of them with props that provide the URI for the axios call. export default { name: "CardData", props :['uri','suffixe' ,'label'], data : function (){ return { lab : this.l ...
When constructing a web page using VUE.JS, a GET request is made with Axios. In the form fields, special characters and accents may be present depending on the user's input. For instance, if the surname entered in the form field is 'Ruíz' ...
Recently, I have been facing some challenges with making API calls from localhost using axios in a loop. While it works smoothly at times, most often I encounter errors like: cause: Error: connect ECONNREFUSED ::1:8000 at TCPConnectWrap.afterConnect ...
When working with my Vue.js component, I encounter an issue with redirecting users to the login page on error 401. Here is the code snippet where the problem occurs: mounted() { this.getDataFromApi() .then(data => { this.events = data.data; th ...
I've been working on integrating Vuejs and TinyMCE, using the @tinymce/tinymce-vue package for the Vue integration. I followed all the instructions and everything seems to be functioning properly - I can write, insert images... everything except for the v- ...
I am trying to fetch data using the fetch method in Nuxt/Axios to send a post request and retrieve specific category information: async fetch() { const res = await this.$axios.post( `https://example.com/art-admin/public/api/get_single_cat_data_an ...
After successfully hitting an endpoint with Postman, I noticed that the value of req.headers.cookies is undefined when using axios. However, browser cookies are functioning correctly. In contrast, Postman requests show that the value of req.headers.cookie ...
Reaching out to the backend to retrieve posts from a mongoDB database. Successful in postman but encountering a custom error on the frontend. Puzzled as to why it's not functioning properly. Utilizing Redux to fetch user information for ...
I'm currently facing a situation where I need to create a petition to an endpoint and retrieve the URL of the backend that I intend to use. My setup involves a file with the API configuration where I instantiate axios. Previously, my approach was simple a ...
When working with getStaticProps and getServerSideProps in Next.js, I need to intercept and add common header properties to all request calls that are executed server-side. axios.interceptors.request.use(function (config) { // Perform actions before ...
Is there a way to successfully send a post request using Axios that includes both body data and form data? I am having trouble getting the data to reach my route handler: axios({ method: 'POST', url: `${keys.SERVER_URL}/post/new-post/${i ...
As I work on developing a web app using Vue.js, users must log in to receive an API key. My post request to the API through axios includes two parameters - a name and a password. However, upon form submission, persistent errors keep appearing: OPTIONS htt ...
Below is the code snippet : let namesList = ref([]); const GetFormData = (payload) => { return new Promise((resolve, reject) => { api .get("api.php", { params: { search: payload } }) .then((response) => { data. ...
I am currently developing a MERN stack application that retrieves information regarding college classes and presents it in a table format. The CoursesTable.js component is structured as follows: import React, { useState, useEffect } from 'react'; ...
main.js import Vue from "vue"; import App from "./App.vue"; import VueRouter from "vue-router"; import HelloWorld from "./components/HelloWorld"; import User from " ...