When attempting to perform an AXIOS.post in a Vue.JS application, the process fails when exceeding about 1500 characters. Instead of reaching the Web API, it goes directly to the error area. Typically, this function calls a .Net Web API that generates a MS Word Document and returns it to the user.
let pm = "1234567890,"
Create loop to add pm = pm + pm '200 times
let updatedData = {
memberID: 12345,
pmids: pm
};
axios({
method: "post",
url:
"http://localhost:54269/api/DataTable/PostValue",
params: {
value: JSON.stringify(updatedData)
},
responseType: 'blob' ,
maxContentLength: Infinity,
maxBodyLength: Infinity,
headers: {
'content-type': 'application/json',
'Accept': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
}
}).then(response =>{
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'DataTable4_.docx');
document.body.appendChild(link);
link.click();
})
.catch(err => {
if( err.response ){
console.log(err.response.data);
}
if( err.message ){
console.log("message: " + err.message);
}
});
} ,
Once PM exceeds 1500 characters, I encounter an error
POST http://localhost:54269/api/DataTable/PostValue?value=%7B%22memberID%22:12345,%22pmids%22:%2212345,23456,45678%22%7D 500 (Internal Server Error)
dispatchXhrRequest @ xhr.js?e38e:177
xhrAdapter @ xhr.js?e38e:13
dispatchRequest @ dispatchRequest.js?c09c:52
Promise.then (async)
request @ Axios.js?108a:61
wrap @ bind.js?784f:9
saveSwitchValue @ reporterAPI_Unique_PI.vue?5e84:382
create_word_doc_post @ reporterAPI_Unique_PI.vue?5e84:451
toolbarClick @ reporterAPI_Unique_PI.vue?5e84:816
Observer.notify @ observer.js?e8e3:99
Base.trigger @ base.js?3f78:181
GridComponent.trigger @ grid.component.js?9a24:85
Toolbar.toolbarClickHandler @ toolbar.js?3c15:337
Observer.notify @ observer.js?e8e3:99
Base.trigger @ base.js?3f78:181
Toolbar.clickHandler @ toolbar.js?4b00:573
reporterAPI_Unique_PI.vue?5e84:409
Blob {size: 1151, type: 'application/json'} size: 1151 type: "application/json" [[Prototype]]: Blob arrayBuffer: ƒ arrayBuffer() size: (...) slice: ƒ slice() stream: ƒ stream() text: ƒ text() type: (...) constructor: ƒ Blob() Symbol(Symbol.toStringTag): "Blob" get size: ƒ size() get type: ƒ type() [[Prototype]]: Object
I expect to be able to utilize JSON.stringify to send a considerable amount of data to a server without issues. I am not referring to uploading large amounts of data, just moderate sizes. If there are expert training resources available, I am eager to learn. Existing tutorials on platforms like Udemy and YouTube predominantly focus on small-scale examples. Additionally, I have verified and adjusted the Maximum allowed content length on my local IIS server to handle larger requests.
If interested:
<System.Web.Http.HttpPost> <System.Web.Http.Route("api/DataTable/PostValue")> Public Function PostValue(ByVal value As String) As String 'HttpResponseMessage
String for testing