Error 414: The URL exceeds the maximum length and cannot be processed

Question

Error 414: The URL exceeds the maximum length and cannot be processed

I am currently utilizing vuejs and sending an axios request to the server in order to download a csv file.

download() {
        var that = this
        //this.records = [{id: 1, name: 'Jack'}, {id: 2, name: 'Jacky'}, {id: 3, name: 'Jackie'}.....100s]
        //this.header = [{value: 'id', text: 'ID'}, {value: 'name', text: 'Name'}]
        var headers = this.header.map(a => a.text);
        var url = USERS_REPORT_DOWNLOAD_URL + '?';
        this.$axios.get(url, { params: { users: this.records, headers: headers}, responseType: 'blob' })
            .then(response => {
                 var file = new Blob([response.data]);
                 FileSaver.saveAs(file, 'users ' + moment().format('MMMM Do YYYY, hh-mm a') + '.xls');
            });
}

Upon calling this method, I encounter the error

HTTP Error 414 - The request URL is too long

. This issue may arise due to excessively long parameters. Any assistance in resolving this matter would be greatly appreciated.

javascript vue.js http axios

Answer 1

Answer №1

fetchAndSaveData() {
            var self = this
            //this.data = [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}, {id: 3, name: 'Jill'}.....100s]
            //this.columns = [{value: 'id', text: 'ID'}, {value: 'name', text: 'Name'}]
            var columnTitles = this.columns.map(item => item.text);
            var downloadUrl = USERS_DATA_DOWNLOAD_URL + '?';
            let postConfiguration = {
             responseType: 'blob',
            }
            this.$axios.post(downloadUrl, { data: this.records, headers: columnTitles }, postConfiguration)
                .then(result => {
                     var fileBlob = new Blob([result.data]);
                     FileSaver.saveAs(fileBlob, 'users_data_' + moment().format('MMMM Do YYYY, hh-mm a') + '.xls');
                });
}

Answer 2

fetchAndSaveData() {
            var self = this
            //this.data = [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}, {id: 3, name: 'Jill'}.....100s]
            //this.columns = [{value: 'id', text: 'ID'}, {value: 'name', text: 'Name'}]
            var columnTitles = this.columns.map(item => item.text);
            var downloadUrl = USERS_DATA_DOWNLOAD_URL + '?';
            let postConfiguration = {
             responseType: 'blob',
            }
            this.$axios.post(downloadUrl, { data: this.records, headers: columnTitles }, postConfiguration)
                .then(result => {
                     var fileBlob = new Blob([result.data]);
                     FileSaver.saveAs(fileBlob, 'users_data_' + moment().format('MMMM Do YYYY, hh-mm a') + '.xls');
                });
}

Error 414: The URL exceeds the maximum length and cannot be processed

Answer №1

Similar questions

The communication between the child and parent components is failing to function correctly

"Creating dynamic web apps with the powerful duo of Meteor and Zurb

Guide to transferring req.params to a callback function within node.js

Troubleshooting AngularJS: Diagnosing Issues with My Watch Functionality

Eliminate redundant XML entries when using jQuery autocomplete

Having trouble with implementing the Drag API Function alongside Javascript Arrow Functions?

Is there a viable substitute for websockets that can be utilized on shared hosting platforms?

Encountering an issue when transferring data between controllers utilizing a demo service

Guide on creating multiple instances of vue-multiselect with a simple button click

I am unable to apply CSS to style my <div> element

Generate a fresh FileReader instance using the downloaded file via XmlHTTPRequest

Having trouble with the dropdown onclick event not triggering when an item is selected in React?

Trouble with React Native ListView Item Visibility

Utilizing Props in the mounted hook of Vue.js 2

Display a different string from an array at random, revealing each one gradually with a time delay

Vue form component triggers the submit event twice

React Native - Issue with array value not reflecting in Text component

Issue with Gijgo grid not updating properly during change event

Develop an XML document with the use of either Javascript or PHP

A guide on using jCrop to resize images to maintain aspect ratio