Uploading with Javascript CORS consistently ends with an error event occurring

My current challenge is uploading a file to a server using JavaScript in compliance with the CORS specification.

While there are numerous examples available online that successfully upload the file, I encounter an error as the final event being fired.

Upon examining the target, the XMLHttpRequest object reports a readyState of 4 which signifies that:

DONE: The data transfer has been completed or something went wrong during the transfer (e.g. infinite redirects).

source http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-readystate

Despite the file being uploaded successfully and the progress functioning as expected with the server responding with a 201 status code, the status returned is always 0.

A snippet of the code used for this operation:

var fd = new FormData(document.getElementById('viForm'));
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", submitAddress);
xhr.setRequestHeader('X-Auth-Token', token);
xhr.send(fd);


function uploadFailed(e) { console.log(e); }

Answer №1

The issue arose because I had configured the server to include the necessary headers in the OPTIONS request, however, I forgot to include the Access-Control-Allow-Origin header in the actual POST.

xhr.setRequestHeader('Access-Control-Allow-Origin', '*');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unique phrase: "Personalized text emphasized by a patterned backdrop

I'm facing a challenge and struggling to find a way to highlight text using CSS or jQuery. My goal is to have an image on the left, another one on the right, and a repeated image in between. Since there are some long words involved, I need a dynamic s ...

Utilizing PHP, AJAX, and MySQL for dynamic checkbox filtering and seamlessly switching between logical operators AND/OR

I'm attempting to implement a search filter using checkboxes. Depending on which checkboxes are selected, the `SELECT` query will need to incorporate both `AND` and `OR`. Below is the HTML code for the filter: <table> <tr ...

When utilizing jQuery.Mockjax to simulate the JSON data, the Backbone.Collection.fetch() function consistently results in a 404 error

My setup is pretty straightforward: Main.js: (function($) { "use strict"; var Company = Backbone.Model.extend({ defaults: { title: "", description: "" }, initialize: function() { ...

Creating a dynamic map in AngularJS by parsing and utilizing data from a JSON file

Looking to create a map from JSON data returned by a RESTFUL WEB Service using AngularJS. Here is an example of the JSON format: myJSON = [{ id: 8, color: "red", value: "#f00" }, { id: 37, color: "green", value: "#0f0" }, { id ...

Is there a way to dynamically pass values to a form in React?

Learning React on my own has been challenging, especially when trying to accomplish what I thought would be a simple task. To put it briefly, I have a menu with several items. I aim to select a menu item and have a form open next to it. The form shoul ...

Converting line breaks into a visible string format within Angular

After thorough research, all I've come across are solutions that demonstrate how to display the newline character as a new line. I specifically aim to exhibit the "\n" as a string within an Angular view. It appears that Angular disrega ...

Using Vaadin: update Label text with TextField input after Button is clicked

I'm working on a simple Vaadin form where I want the text entered in a TextField to appear in a Label after the user clicks on a Button. Here's the code snippet: package com.example; import javax.servlet.annotation.WebServlet; import com.vaad ...

"Adding an Image to Another Image in HTML or JavaScript: A Step-by-Step

Hello there! I'm currently working on creating a status bar where I can add an image after another image. Let me explain my idea clearly. So, I have two images in GIF format: one is white and 10x10px, and the other one is black and also 10x10px. On ...

Exploring JavaScript Object-Oriented Programming (OOP) concepts. Delving into the

Here is a sample of JavaScript OOP that I am currently studying. I'm puzzled about why getA() and getC() are returning undefined, but getB() returns 2 when I update the variable B in the constructor and assign it to b. When I execute getD(), it appea ...

Transform this JavaScript into Vue 3 code

Hey there! I'm currently working on implementing dark mode into my project by following a tutorial. However, the tutorial is based on JavaScript and not Vue, so I'm having some trouble converting this particular section of code to work with Vue 3 ...

Occasional TypeError when receiving JSONP response using jQuery .ajax()

Occasionally, I encounter an error message stating Uncaught TypeError: undefined is not a function when processing the JSONP response from my jQuery .ajax() call. The JSON is returned successfully, but sometimes this error occurs during the reading process ...

Prevent clicks from triggering on dynamically loaded ajax content within a DIV

I am seeking help on how to prevent click events from being triggered on dynamically loaded content within a specific DIV element. <div id="left_column"> <div class="menu">------</div> <div class="menu">------</div> ...

Is it possible to leverage the flex features of react-native in a manner similar to the row/column system of

Is it a good idea to utilize flex in react native by creating custom components that retrieve flex values? I previously used the bootstrap grid system and now I am exploring react native. Is there a way to implement this example using react-native bootstr ...

Is there a way to send an ajax post request when the nextpage button is clicked on jqgrid in order to fetch a fresh batch of data

Is there a way to use an ajax post request when the next page button is clicked on jqgrid in order to load a new set of data? I need to send the id of the last row to retrieve the following set from the database. ...

"How can you enhance the performance of JavaScript and CSS in a Chrome Extension without using exclude_matches/globs or excluding domains

I have been in the process of creating a Chrome Extension, and unfortunately, when I tried to make it work on specific URLs, I encountered an issue. While Chrome has options like exclude_matches and exclude_globs for this purpose, there seems to be a bug i ...

Struggling to fix the npm install pre-gyp error

I'm currently in the process of setting up this application on my m1 MacBook Air > Github - Todoist Clone When I run npm install in the terminal, I encounter the following error. Please refer to the log below: 10630 verbose node v16.13.2 10631 ver ...

Resize drop zone with drag and drop functionality

I am using jQuery for dragging and dropping elements, but I am facing an issue. When I resize the drop zone while starting to drag an item, it seems like the previous size of the drop zone is still being used as the space. Is there a way to fix this? ...

Ways to display only particular dates in react-dates

I am working with an array of dates. const availableDates = ["2019-02-01", "2019-02-04", "2019-02-05", "2019-02-06", "2019-02-07", "2019-02-11", "2019-02-12", "2019-02-13", "2019-02-14", "2019-02-15", "2019-02-19", "2019-02-20", "2019-02-21", "2019-02-22" ...

Tips for integrating custom images or icons into Onsen-UI:

I am currently utilizing the Onsen-UI framework along with AngularJS to create a mobile application. I want to incorporate custom images for buttons, but they appear blurry or unclear on certain mobile devices when the app is launched. Below is my code sn ...

Tips for preventing conflicts between variables and functions in JavaScript (no need for a jQuery plugin)

How can I prevent variable and function conflicts in Javascript without relying on jQuery plugins? I am interested in creating my own functions but want to avoid conflicts. I believe using function scope, where functions are used solely for the purpose of ...