I have the following AJAX request that is running successfully for all browsers on our site but returning a 405 for IE 11. I noticed here: http://caniuse.com/#feat=xhr2 that IE 11 has some issues with XMLHttpRequest but I wasn't completely clear on what that means. We are returning JSON in the response with the content type set to application/json. Additionally, we do use CORS for this request, but everything is working on other browsers.
I apologize with not sharing more information, but I am just wondering if this is a known IE 11 issue that I just can't seem to find online.
try {
const request = new XMLHttpRequest();
request.open('POST', this.host, true);
request.withCredentials = true;
request.setRequestHeader('Content-Type', 'text/plain; charset=UTF-8');
request.send(outboundStr);
request.onload = function (e) {
if (request.readyState === 4) {
if (request.status === 200) {
try {
const responseObj = JSON.parse(request.response);
setSbmId(user, responseObj);
user.country = responseObj.c;
} catch (ex){
util.throw(`FluentD parse error: ${request.response}`, ex);
}
} else {
util.throw('FluentD response error')
}
}
};
} catch (e) {
util.throw('Failed to send payload to fluentd', e);
}
Related
In Firefox' JavaScript engine I do a (deprecated) synchronous XMLHttpRequest like this:
var request = new XMLHttpRequest();
request.open('GET', 'http://localhost:8780/BoilerData/invention.html', false);
request.send();
if (request.status === 200) {
...
} else {
...
}
Problem is when the server myserver.com is not running I get in the browser console a NS ERROR FAILURE error and the else part is not executed.
However I would like to react to this error in JavaScript. How can I catch this error and react to it (e.g. with using another server) while still doing a a synchronous XMLHttpRequest.
Update
Here more details to the error message. In the console of my browser (Firefox 78.4.1esr) I see the following:
If you prefer a synchronous request, try catch the net::ERR_CONNECTION_TIMED_OUT exception:
var request = new XMLHttpRequest();
request.open('GET', 'http:/myserver.com/bar/foo.txt', false);
try{
request.send();
if (request.status === 200) {
//...
}
}catch(e){
console.log('Got an exception: ', e);
//else ...
}
Synchronous XMLHttpRequest on the main thread is deprecated, you may want to do request.open asynchronously, and put the else logic in onerror event processor:
var request = new XMLHttpRequest();
request.open('GET', 'http:/myserver.com/bar/foo.txt', true);
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// ...
}
}
request.onerror = function() {
console.log('An error occured! status = ', request.status);
// what else {
// ...
}
request.send();
I have few files (~30Mb every) that needs convert to base64 and upload for server. After uploading part of files IE11 throws TypeMismatchError. File content is a base64 string that it is not encoding problem. Panel of network requests do not contents it, request fails before sending. Another browsers are working without errors. How to fix it?
function post(url, data, timeout) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = (result) => {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
resolve(xhr.responseText);
}
};
xhr.onerror = function (event) {
reject(event);
};
xhr.timeout = timeout;
xhr.send(data);
});
}
function handleFileSelect() {
post('/upload', LARGE_FILE_DATA_BASE64).catch(error => {
// Throws TypeMismatchError error after few uploads.
});
}
Google says about this similar problem only here: https://helperbyte.com/questions/276626/jquery-deferrer-typemismatcherror-when-you-bulk-load-data-cant-find-what-this-might-mean
I am trying to handle an error thrown by a HTTP request, but am unable to properly intercept the event.
POST http://localhost:8080/path/to/endpoint 500 (Internal Server Error)
I have a drop zone on the page that receives a file and parses it on a server. When the file is properly formatted it works well, but am trying to handle errors caused by improperly formatted documents.
According to the Mozilla docs the XMLHttpRequest has an onerror function, but it's getting bypassed when I try to use it as follows:
_postRequest() {
let files = this.files[0];
let data = new FormData();
let request = new XMLHttpRequest();
// File selected by the user - in case of multiple files append each of them
data.append('file', this.files[0]);
// AJAX request finished
request.addEventListener('load', (e) => {
// Send response to DOM
this.dispatchEvent(new CustomEvent('return-validated-items', {
bubbles: true, composed: true,
detail: request.response
}));
});
// If server is sending a JSON response then set JSON response type
request.responseType = 'json';
// Send POST request to the server side script
request.open('post', 'http://localhost:8080/path/to/endpoint');
request.onerror = function () { // This function is not working properly
console.log("** An error occurred during the transaction");
};
request.send(data);
}
I was also having issues with this alternative method:
try {
request.open('post', 'http://localhost:8080/path/to/endpoint');
request.send(data);
} catch (e) {
console.log(e)
}
How can I handle an error caused by request.send()?
The load event should get the message. Look at the status there
request.addEventListener('load', (e) => {
console.log(e.currentTarget.status) // or request.status
})
so you can do something like
request.addEventListener('load', (e) => {
if (request.status < 400) {
dispatchIt()
} else {
displayError()
}
})
I'm using slim cropper to upload avatar's on my codeigniter project , It works perfectly on my localhost but on the server , the ajax call to the php that does the image upload keeps giving a 403 forbidden error, below is the section of the code:
function send(url, data, progress, success, err) {
var xhr = new XMLHttpRequest();
if (progress) {
xhr.upload.addEventListener('progress', function (e) {
progress(e.loaded, e.total);
});
}
xhr.open('POST', url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var text = xhr.responseText;
// if no data returned from server assume success
if (!text.length) {
success();
return;
}
// catch possible PHP content length problem
if (text.indexOf('Content-Length') !== -1) {
err('file-too-big');
return;
}
// if data returned it should be in suggested JSON format
var obj = null;
try {
obj = JSON.parse(xhr.responseText);
} catch (e) {}
success(obj || text);
} else if (xhr.readyState === 4) {
err('fail');
}
};
xhr.send(data);
}
From what I've read , providing a CSRF token might solve the problem, but the request is made from the same domain and I don't require that on my localhost. What could be the problem?
This is my code for XMLHttpRequest. I am using XMLHttpRequest to access api.
How to resolve cross browser origin issue?
var url = "http://192.168.1.10:8080/analytic/log/visit/create";
var json = JSON.stringify(data);
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
// xhr.setRequestHeader('method', 'post');
xhr.onload = function() {
var users = JSON.parse(xhr.responseText);
if (xhr.readyState == 4 && xhr.status == "201") {
console.table(users);
} else {
console.error(users);
}
}
xhr.send(json);
Not a valid fix but you can use browser specific plugins like ,
Allow-Control-Allow-Origin: *1.0.3 (for chrome, an extension)
CORS Everywhere (for firefox,an extension)
its a quick fix but not permanent