The request URL is too long return Error 414

Question

I am using vuejs and making an axios request to server to download a csv.

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');
            });
}

When this method is called it returns, HTTP Error 414 - The request URL is too long. Maybe because params are too long. Please help me resolve this issue.

https://stackoverflow.com/questions/2659952/maximum-length-of-http-get-request if the URL is too long then as a workaround you can use HTTP POST on the back-end side instead of GET. (https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/414) — Taras Kovalenko, Dec 12 '22 at 15:31
@TarasKovalenko Can you suggest how should be the syntax for using response type with post request? — user12763413, Dec 12 '22 at 15:47
I found this article, I hope this helps you. https://stackoverflow.com/questions/6955302/http-error-414-the-request-url-is-too-long — Manny53365, Dec 12 '22 at 15:50

score 0 · Answer 1 · answered Dec 12 '22 at 17:48

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 + '?';
            let postConfig = {
             responseType: 'blob',
            }
            this.$axios.post(url, { users: this.records, headers: headers }, postConfig)
                .then(response => {
                     var file = new Blob([response.data]);
                     FileSaver.saveAs(file, 'users ' + moment().format('MMMM Do YYYY, hh-mm a') + '.xls');
                });
}

How your answer solves the problem? You could add more detail, answers with only code are discouraged :) — Christian Vincenzo Traina, Dec 12 '22 at 18:10

The request URL is too long return Error 414

1 Answers1