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.
Context In the process of developing a React-Redux application, I am faced with the task of handling axios calls to an external API over which I have no control. The specific axios request in question is executed by a function called "getData". This reque ...
When I make a call to this.func1() within func2, func1 returns undefined. Can anyone offer some assistance? It seems like the function is returning nothing because axios is not finished yet. How can I resolve this issue? func1:function(val){ if(val.x == ...
I am currently developing a NextJs page where I have incorporated axios along with useState and useEffect to fetch JSON data from a web API and store it in a state called 'apiData'. .then((res) => { setApiData(res.data.Projects); conso ...
I am working on a new project where I am utilizing axios to handle request data. However, I am facing an issue when using axios in the getStaticProps function which results in an error on my index.js page. Here is a snippet of my index.js code: import ...
For additional discussion on this issue, please refer to the GitHub thread at - https://github.com/axios/axios/issues/2743 In my Next.js project, I am using Axios and occasionally encounter an error related to interceptors when returning a Promise.reject. ...
Last night, I was experimenting with ExpressJS and discovered something interesting when working with a simple code snippet: app.post('/contact', function(req, res, next) { res.send('Congratulations! You have submitted the form'); }); I successfully re ...
When working on my Reactjs app, I am using axios.post() to edit a mysql database on the backend. The data is successfully sent through the post request to the backend. However, I am facing an issue where I need to determine when the post request has finish ...
Providing some background information: Within my Vue application, I have a view called Articles. Upon mounting this component to the DOM, I use the axios library to fetch all posts from the database through Laravel controllers and API routes. In the articl ...
Issue with axios post request throwing BadRequestError I encountered this error message while trying to send a post request using axios. Here is the code snippet where I gather input data from a form and make a post request to my login URL with the obtain ...
When my component is mounted, it makes a call to this.axios.get() and passes a vuex-store variable to the API. The API responds with an array, which the component then displays after transitioning from a loading element. In my unit test, I want to simulat ...
I'm facing an issue while setting up a route to download videos in my Vue app, which is backed by an Express server. The first request sent to the backend works fine and the file is downloaded successfully. However, subsequent requests fail with a Net ...
I've been working on integrating Facebook login with vue-authenticate and passport. Successfully logged into my Facebook account, I obtained the 'Callback code' as well. Here is my callback URL: http://localhost:8080/auth/callback?code=AQD0 ...
Having trouble displaying a value inside a div tag in my nuxt app. An error message keeps popping up saying "Cannot read property 'free_funds' of undefined. Still getting the hang of Axios and Nuxt. Could it be that Bootstrap requires JQuery to update da ...
Having a problem with my Vue template below. I used axios to fetch data but couldn't save it in the this.sub_brand variable. The console.log(this.sub_brand) only works within axios. Here is the complete code: <template> <div> <div c ...
I am currently utilizing axios to send a GET request to the Twitter search API in order to fetch recent tweets that utilize a specific hashtag. To begin with, I ran tests on the twitter search API via Postman and noticed that the id and id_str tweet statu ...
function checkStudentGrades(e) { e.preventDefault() setSubject(String(responseProfessor[1])) axios .post(`http://localhost:3001/getNotasAluno/${subject}`, { studentSearch }) .then((response) => { ...
As a first-time user of Axios to connect to my Java/SpringBoot Rest GET service on localhost:8080, I am using React and node.js. My goal is to successfully retrieve the REST data but encountered the following error: Failed to compile src\App.js Lin ...
I encountered a problem while attempting to update an element from my form. Here is the code snippet: <script setup> const updateSupply = async () => { console.log("Test"); errors.value = "" try { ...
Perhaps this is a somewhat basic inquiry, as I am still learning the ropes of vue.js and javascript. Please bear with me if my question is not well-articulated or if the solution is straightforward... I am facing an issue where I need to retrieve data from ...
import React, { Component } from 'react' import './App.css'; import axios from 'axios' const api = axios.create({ baseURL: 'https://api.openweathermap.org/data/2.5/weather?q=Karachi&appid=e3f8864274e67280b3ee8eb501d3718a' }) export class WeatherApp ...
I've encountered an issue while attempting to execute my first POST call. The error message states: "Access to XMLHttpRequest at 'url' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field ...
Here is my express code where I am utilizing express-session to manage storage and work with cookies. Since version 1.5.0, the module no longer requires cookie-parser to handle storing the cookie in req/res. The session data is stored in a PSQL database h ...
I've run into a problem with client-side data fetching on my Next.js 14 project. More specifically, I'm trying to retrieve user profile information from a backend API using Axios within a component, but for some reason, the data isn't coming ...
I'm trying to figure out how to create a LinkedIn login component, but I'm having trouble finding information about headers and parameters. Can someone help me understand how to send a GET or POST request with parameters and headers? Here's the code I hav ...
In the process of developing a new application with Vue.js and axios, I am focusing on retrieving stock market details based on company names. To kickstart the application, I am compiling all the names of US-based S&p 500 companies into a JavaScript ar ...
I am facing an issue with my backend endpoint. I can successfully retrieve a list of customers using jwt token on Postman, but when I try to fetch the list from a React app using axios get request, it fails. After reading through this question, I implemen ...
I'm trying to wrap my head around VueX, but I'm having trouble getting Axios to work with it. In my store.js file, I have the following setup: state: { cards: [], currentPage: 1, lastPage: 2, }, actions: { loadGradients(pageNumber) { ...
I have a situation where I need to handle API calls in my React components. Each ChildComponent should make a specific API call when clicked, and currently, the API call seems to repeat itself when a modal is opened or closed. I came across a discussion o ...
I am trying to fetch USD data from an API using the `changeCurrency` method in the `methods`. How should I go about implementing it? data(){ return { posts: 1, USD:changeCurrency() } }, methods: { changeCurrency: fu ...
Currently working on an e-commerce application using django rest framework and vue. Utilizing djoser.authtoken for authentication purposes. Successfully managed to create a user with a POST request to /users/, but encountering issues while attempting to l ...
Dear friends, I need some help with incorporating state data from my Vuex store into a string in one of the axios calls within actions. Below is an excerpt from my store: export const store = new Vuex.Store ({ state: { participants: [], filterTa ...
Every time the token expires in my application with NEXTjs and I attempt to make a post request, it gets stuck in a loop. The POST request returns 401, then the refresh-token returns 200 after attempting the post again, it returns 401, and the cycle repeat ...
Currently, I am utilizing Axios within VueJS to make ajax requests. However, I have encountered an issue when attempting to send these requests. This snippet shows my JavaScript code: axios.post('http://localhost/app/php/search.php', { quer ...
Utilizing Axios for fetching data from my backend endpoint has been resulting in a 404 error. Oddly enough, when I manually enter the URI provided in the error message into the browser, it connects successfully and returns an empty object as expected. Her ...
My current challenge involves using axios to communicate with the back-end. The code structure seems to be causing an issue because when I attempt to access req.body in the back-end, it returns undefined. Here is a snippet of my front-end code: const respo ...
Encountered the following issue: Error: TypeError: categories.map is not a function Snippet from App.js: export default function Header() { const [categories, setCategories] = useState([]); useEffect(() => { const loadCategor ...
I've been working with Laravel 5.6 and have successfully set up all my API routes, which are responding to requests from my REST client (Paw). Now, I want to create a basic front end to interact with these routes. In an effort to utilize Laravel&apos ...
I've been working on uploading images to an S3 bucket using react and expressjs. However, whenever I try to upload the image, I keep getting a 501 Not Implemented Error. My approach involves using axios to communicate with the endpoint created in the ...
I've encountered an issue while attempting to upload large files using Next.js. I've set up an onChange function for my file input, and here's the code snippet: const handleFileUpload = () => new Promise(async (resolve) => { if(ref.current?.files ...
Currently, I am facing an issue while using React + Django to make a post request via axios. The problem seems to be arising from csrf verification. Despite trying various solutions found online for similar issues, none of them seem to be effective in reso ...
Having successfully created API's for a standard transaction application (using mongoDB for DB), I have API's set up for users, products, and orders. While I've been able to effectively use and display the information stored about users and products, I'm f ...
Dealing with image uploads to my backend has been a challenge for me. While there's no issue when I use Postman for posting, implementing it in React Native results in code problems. Below is the request code used in React Native: This code is for handli ...
I am trying to implement pagination for the results of an API call. The following code snippet shows how I am making the API call using Axios: apiCall() { const API = `http://www.omdbapi.com/`; axios.get(API, { params: { apikey: proces ...
I am encountering an issue with making a GET request to a CORS enabled corona virus API using axios and Vue. I have no control over their server, and my Vue app was created with vue-cli. Interestingly, I am able to make two requests from different APIs - ...
After numerous attempts, I managed to retrieve data from SWAPI but only the first 10 people were being displayed. Seeking a solution, I found that utilizing async functions was the key. const express = require("express"); const router = express.R ...
I've been struggling with this issue for almost a day now and I'm at a loss for what else to try. For some reason, Dialogflow Fulfillment in Dialogflow ES is refusing to make any HTTP calls. Every time I attempt, I receive the same error message: No respo ...
Previously, I utilized ApiSauce to send listings from my React Native application to a Node.js server with Multer. I made the switch to Axios, and everything went smoothly except for the image uploading component. export const add = (listing, onUploadPro ...
Is there a way to post data from three input fields in a form to a MySQL database table using Axios? I have attempted multiple times but have been unsuccessful. Can someone provide the code for connecting to the database and inserting the query? //PostFo ...
Is there a way to display the information from the input boxes in the image on the screen using node js? ...
Is there a solution for utilizing axios interceptors with NextJS 13? It seems like it should be simple, but I'm struggling to make it work. Here's a basic client component: "use client" import React, {useState} from 'react' import axiosIntercept ...
I am currently working on deploying an API for my application. However, when using the following code snippet, I encountered an unhandled error stating "Error: Data cannot be encoded in JSON." const functions = require("firebase-functions"); const axios = ...
I'm currently developing a VueJs parent component with the ability to generate rows dynamically. This component invokes another component responsible for populating two dropdowns using axios - one for categories and the other for subcategories (with t ...
In my attempt to access nested JSON within an array using Vue for a simple search functionality, I encountered a problem. Each school is encapsulated in a "hit" array, causing the system to perceive only one result of "hit" instead of returning data for ea ...
I have encountered a problem while trying to update the base URL in my Axios patch request. Despite specifying the new baseURL in the stageReceiver method, it continues to use the default baseURL (which is set when running npm serve). import axios from &q ...
Hello everyone! I am new to the world of React-Redux and I am currently working on a classification app using Flask API with ReactJS as the front-end. However, I am facing some issues when trying to call the API in Redux through the action file. The predi ...
I'm looking to make an axios request, but I need a state update with geolocation value beforehand. I attempted the following: const Home = () => { const [latitude, setLatitude] = useState(); const [longitude, setLongitude] = useState(); functi ...
I need help with my react/redux application that fetches a token from an api server. Once the user is authenticated, I want all axios requests to automatically include that token as an Authorization header without manually adding it to each request in the ...
I've designed a custom page template to seamlessly integrate a vue app into an existing website <?php /* * Template Name: Registration Form */ get_header(); ?> <div id="app"></div> <?php get_footer(); ?> After some troub ...
I'm currently developing a nextjs app that incorporates authentication. There are two key functions that I execute on each page load. The first function checks for the existence of jwt cookies and then calls another function to validate the tokens if they ...
I'm encountering an issue with a SqlError while trying to retrieve data from my database. It seems like the problem is within my fetchData function where I might not be passing the two parameters (startDate and endDate) correctly. The specific SqlErr ...
As I navigate my way through using react and Axios, I encountered an issue with a get request in my code. Currently, I have a button that triggers the request when clicked, but I want to eliminate the need for this button and instead have the information d ...
I am encountering an issue with a contact form that utilizes React with axios on the frontend and Express with nodemailer on the backend while running locally. The expected outcome is for me to receive an email when I click the "Submit" button. However, up ...
Given our current setup: We have a backend ready to use with JWT authentication and a custom Role-Based Access Control system There are 4 private pages specifically for unauthenticated users (login, signup, forgot password, reset password) Around 25 priva ...
Whenever I navigate to the message page and select a device, the v-model selected value changes. However, if I go to the device or contact page, the v-model selected value remains unchanged or goes back to the last selected value. Below is the function in ...
Struggling with a function that authenticates on a website, it runs smoothly in a basic node.js script but fails when executed from a .vue page within the NuxtJS framework. The error message received when running in the .vue page is TypeError: axiosCookie ...
I am encountering an issue while trying to send multipart/form-data using axios from the frontend. The same post request works fine in Postman/Insomnia but fails when executed from the frontend. The backend shows the following error: node:events:505 ...
I have implemented a loading spinner in my Vue project to display until the data is fully loaded. I created a separate component called LoadingComponent.vue for this purpose. <template> <div class="preloader" v-if="show"> ...
In my current work environment, the only image processing library available is NodeJS's Sharp for scaling images. It has been reliable due to its pipe-based nature, but now I have been given the task of converting it to TypeScript and utilizing Async/Await ...
I am facing an issue when attempting to make a POST request locally with Axios on my NodeJS front-end app to my .NET core local server. The server returns a 204 status code and the axios request returns a pending promise. How can I change this to achieve a ...
Just started using React and encountered an issue while working on my fetch request: I am receiving a formatted response with Axios, but when I try to set the state using the same variable like this: setSelectedStatParams(formattedResponse), it shows up as ...
I recently came across a helpful tip in an article about using axios for AJAX requests in Vue. The author mentioned that by setting Vue.prototype.$http = axios, we can then use this.$http within the Vue instance, which worked perfectly for me. However, wh ...
One scenario I'm facing involves having 2 tables in my database. Let's say I delete a row (Role) from the Role Table. The question is, how can I also remove the particular role ID associated with the deleted role from the User Table? The User Table contai ...
After conducting tests on Postman, I received the correct response. However, upon deploying the code for the frontend team, they reported that it consistently returns false... views.py # Verify authentication status def verify(request): info = {} ...
My website has a form that uses the v-model directive for data binding. It serves as a default login page. However, when attempting to log in, I receive a 401 unauthorized error. Interestingly, when testing the same credentials using Postman, I am able t ...
Presently, I am in the process of developing an API that is designed to update the current user in mongoDB based on the data provided in the request. However, whenever I execute findOneAndUpdate(), I encounter a 500 internal server error. (I will outline ...