Posts

Showing posts with the label axios

Downloading excel data using Axios from Laravel backend is not working

Image
Clash Royale CLAN TAG #URR8PPP Downloading excel data using Axios from Laravel backend is not working I am developing a Web application using React JS for the front-end and Laravel for the back-end API. Now, what I am trying to do is I am trying to fetch the excel data from the backend using axios and then download the file. This is my laravel API controller action method. function downloadExcel(Request $request) { //other code goes here return Excel::create($left_photo->id . "-" . $right_photo->id, function($excel) use ($excel_data) { // Set the spreadsheet title, creator, and description $excel->setTitle('Mapping points'); $excel->setCreator('Laravel')->setCompany('Memento'); $excel->setDescription('Mapping points file'); // Build the spreadsheet, passing in the payments array $excel->sheet('sheet1', function($sheet) use ($exce...

Axios Interceptors retry original request and access original promise

Image
Clash Royale CLAN TAG #URR8PPP Axios Interceptors retry original request and access original promise I have an interceptor in place to catch 401 errors if the access token expires. If it expires it tries the refresh token to get a new access token. If any other calls are made during this time they are queued until the access token is validated. This is all working very well. However when processing the queue using Axios(originalRequest) the originally attached promises are not being called. See below for an example. Working interceptor code: Axios.interceptors.response.use( response => response, (error) => { const status = error.response ? error.response.status : null const originalRequest = error.config if (status === 401) { if (!store.state.auth.isRefreshing) { store.dispatch('auth/refresh') } const retryOrigReq = store.dispatch('auth/subscribe', token => { originalRequest.headers['Authorization'] = ...

Cors in Ajax Meet 302 Redirect

Image
Clash Royale CLAN TAG #URR8PPP Cors in Ajax Meet 302 Redirect I have a front-end server with port 8081 a background server with port 8080(Spring MVC + shiro) When I send a request to 8080 , I have to set the cors headers on 8080 if the request is a simply request which only returns some json datas, it works But When the response status is 302, Chrome shows 'Redirect from 'http://localhost:8080/' to 'http://localhost:8080/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.' I thought there are two reasons to occur this problem: ① if I intercept this 302 status, and deal this response.headers.Location, I will solve this. But I can't intercept this response(with axios) ② Maybe some settings is wrong with 8080 server, when 302 occurs, the serve haven't set the cors Headers for this page. But I don't understand the backend code. So, ① is feasible? or I need to change the settings on 808...

Firefox axios post to a Nodejs server responds 200 without ever actually entering the post

Image
Clash Royale CLAN TAG #URR8PPP Firefox axios post to a Nodejs server responds 200 without ever actually entering the post I've got two Node Js servers running Express, one to manage the UI and a second to handle certain backend API calls. On Firefox, the UI will make an axios post to the backend and immediately get a 200. I've put tracing all over and the backend server is definitely not being touched. (I'm not familiar with any step-through debugging on Firefox) By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

VueJs Axios Post FormData Parameters

Image
Clash Royale CLAN TAG #URR8PPP VueJs Axios Post FormData Parameters We are using Vue in our frontend application, and for one of our REST service our backend server expects to have the below data structure: public class MAProductsUploadRequest { public List<MAProductUploadRequest> products; } public class MAProductUploadRequest { public String productName; public String productDescription; public double productPrice; public int productOrder; public MultipartFile productImage=null; public double cropX; public double cropY; public double cropWidth; public double cropHeight; public int categoryId; } And in our Vuejs application we tried to post the data as in the below code: addProducts: function () { console.log("Add Products Working. Total Product Count:"+this.excelProducts.length); let header = { headers: auth.getAuthHeader() }; let formData = new FormData(); for (let i=0...