The front-end XMLHttpRequest object sets an error in the request header

Front end source code

// FormData
var myFormData = new FormData();
myFormData.append('file', fileData);
 
// XMLHttpRequest 
var xhr = new XMLHttpRequest();
 
// Set the request header (actually the order of this is not correct)
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
 
// open(method, url, async)
xhr.open('post', actionData, true);
 
xhr.send(myFormData);

As a result, the console error shown in the figure above appears. It can be seen from the prompt that the XMLHttpRequest object must be opened first.

The easy solution is to XHR.Setrequestheader() after XHR.Open();

Similar Posts:

• [Solved] JS Ajax uploads an error “uncaught type error: illegal invocation”
• xhr.js:108 Refused to set unsafe header “Cookie”
• Ajax submitting datagram in firebox_ ERROR_ DOCUMENT_ NOT_ Cached error
• How to deal with the problem of failed to execute ‘send’ on ‘XMLHttpRequest’: failed to load ‘URL’
• [Solved] Axios Cross-domain issues: No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
• Axios gets the upload progress error: xhr.upload.addEventListener is not a function
• JQuery Ajax crossdomain cannot be used in IE [How to Solve]
• error – canvas- Failed to execute ‘toBlob’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
• Uncaught typeerror: the solution of illegal invocation problem
• XMLHttpRequest status=0 (All You Should Know)