AngularJs - Server encountering issue: "XMLHttpRequest is unable to load the specified 'URL'. Preflight response is invalid due to redirection

Can you figure out why the server is returning 'undefined' and 'XMLHttpRequest cannot load the "URL" Response for preflight is invalid (redirect)'?

The app is supposed to send document details to the server through a normal post service, which should return an object with various parameters. However, it's currently returning 'undefined'.

Here is the code snippet for the service used to post the document:

fileUpload: {
    method: 'POST',
    url: config.apiPath + 'employee/service/pushRecords', 
    isArray: false,
    params: {},
    headers: {
        'content-type': undefined
    }
},

The above service is utilized after creating formdata for the document:

function registerFormdata(files, fieldName) {
    files = files || [];
    fieldName = fieldName || 'FileSent';
    var returnData = new FormData();

    _.each(files, function (file, ind) {
        returnData.append(fieldName,file);
    });

    return returnData;
}

Now, let's take a look at the controller where these services are used:

function sendFilesToServer() {
        var formData = employeePushService.registerFormdata(directive.dropZoneFile.fileToUpload);
        return docUploadService.fileUpload(formData)
            .then(function(document) {              
         // Additional actions are performed here, but in browser console the server response shows Error [undefined]
            }).catch(logger.error);
    }

Answer №1

It appears that there may be a CORS issue with the URL you provided in your post. If the server side API was developed by you, you will need to ensure that CORS access is added. Your server should return the following header:

Access-Control-Allow-Origin:

You can also replace with *, allowing all request origins to have access.

When making an AJAX CORS request on the client side, your browser first sends an OPTIONS request to the server to check if the request is allowed. You can observe this request in tools like Chrome’s dev tools under the network tab. In the response headers of this OPTIONS request, the server must include the Access-Control-Allow-Origin header.

Make sure to follow these steps as the issue might be that the server isn't permitting your request.

Additionally, not all content types are supported in CORS requests. Refer to this link for more information that may be helpful.

For situations where a 302 redirect occurs, this link provides further assistance. In such cases, the POST response should also contain the Access-Control-Allow-Origin header.

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

Converting milliseconds into a formatted DateTime using AngularJS: A step-by-step guide

Upon receiving JSON data from the server, I obtained a date-time in milliseconds: $scope.JDT = "1492499995056";. While I am able to display the scope variable 'JDT' on my view using a filter: {{JDT | date:"dd/MM/yyyy h:mm:ss a"}} ... I do not a ...

Upgrade your yarn version in order to rectify any yarn audit errors

Currently, there doesn't seem to be a yarn audit --fix command available. Thus, I am exploring different approaches to resolve the errors detected in my yarn audit. While executing a yarn upgrade, some of the errors were successfully addressed, but a ...

Another component's Angular event emitter is causing confusion with that of a different component

INTRODUCTION In my project, I have created two components: image-input-single and a test container. The image-input-single component is a "dumb" component that simplifies the process of selecting an image, compressing it, and retrieving its URL. The Type ...

Page refresh enhances hover effect style

Is there a way to maintain a "hover" style even after a page refresh if the user does not move their mouse? The hover effect is only activated on mouse enter/mouseover events, so when the page refreshes, the style doesn't persist unless the user inter ...

Boot up 4 collapse feature to conveniently close all other collapsible items at once

Utilizing the Bootstrap 4 Collapse component. My goal is to toggle between collapsible sections like "Categories" and "Brands", displaying only one at a time. The current issue is that multiple collapsible elements are visible simultaneously. .view-cust ...

Tips for looping through multiple states within a single table

I need help with combining data from two different states, campaigns and stats, into a single table. The campaigns state includes sr no, campaign id, campaign name, and campaign status, while the stats state includes reach, sent, delivered, views, clicks ...

Why is the filter in AngularJS not functioning properly?

Can you please assist in fixing the script? This is the html code: <li ng-repeat="date in dateArr | dateFormatter}"> <span class="date">{{date}}</span> </li> And here is the javascript code ...

Retrieve data from an array of JSON objects within a JSON object using ReactJS

Trying to extract data from JSON like this: { "id": 371, "city": "London", "name": "London Station", "trains": [ { "id": 375, "number": "1023", "numberOfCarriages": "21" } ] } Interes ...

Transitioning colors in the renderer using ThreeJS and GSAP

I'm attempting a basic color transition using gsap to modify the renderer's background color. The issue arises when trying to transition from white to black – it simply changes the color abruptly without any fade effect. Conversely, transition ...

Restricting JQuery pop-up to be shown only once

I'm looking for a solution to have a pop-up appear only once when the mouse leaves the screen. I'm not very experienced with coding, so I'm struggling to figure out how to achieve this. // Implementing Exit Intent function addEvent(obj, ev ...

Scrolling horizontally in md-list

I have a list of items where each item can be of varying lengths horizontally: https://i.sstatic.net/ITIQd.png The issue is that long items are getting cut off on the right side. Here's the code snippet I am currently using: <md-list-item ng-repea ...

Unable to align text to the left after inserting an image with a caption in Froala editors

Here are the steps to reproduce the issue: Begin by opening the Froala editor at . Delete all content in the editor. Insert an image. Add a caption to the image. Click outside the image and attempt to type. Problem: After adding an image caption, any te ...

Dealing with infinite loop while verifying cookie in angularjs

In my client-side code, my goal is clear. If the user has the cookie, they are authenticated; otherwise, they are redirected to an authentication endpoint on the server. (function() { 'use strict'; angular .module('App', [ ...

Exploring an Array in Javascript derived from a PHP Array

I have a PHP variable named $TillArray that contains an array. I am trying to pass this array to a Javascript function in order to display an Alert message for each item within the array. Below is the code I have been using: <script type="text/javasc ...

Exploring the features of Three.js: materials and shadows

I cannot figure out why the mesh material I chose is causing issues. As you can see in the image: https://i.sstatic.net/4nijf.png The black objects look fine, with smooth and correct shadows. However, the white objects appear strange and the shadows, in m ...

The Fusion of Ember.js and Socket.io: Revolutionizing Web

I have been trying to incorporate a basic Ember application into the view of my node application. I have verified that Ember is properly set up and my sockets are functioning correctly. However, I am encountering an issue where the data is not being displa ...

I'm looking to determine the value of a checkBox that has been marked using vueJS. How can

Currently, I am in the final stages of a project involving Laravel and VueJS. However, I have encountered a problem. In one modal, I am able to select a checkbox (there may be multiple or none), and I need to retain the value of the selected checkbox when ...

"Chrome is throwing an unanticipated error for bigpipe.js with an uncaught syntax error related to

I have integrated the bigpipe.js method into my website to display a newsfeed. It functions properly on all browsers except for Google Chrome, where it shows an 'uncaught syntaxerror unexpected token =' error. I need assistance in resolving this ...

Adding a QR code on top of an image in a PDF using TypeScript

Incorporating TypeScript and PdfMakeWrapper library, I am creating PDFs on a website integrated with svg images and QR codes. Below is a snippet of the code in question: async generatePDF(ID_PRODUCT: string) { PdfMakeWrapper.setFonts(pdfFonts); ...

There seems to be a glitch in the JavaScript to-do list as it is failing to append new

My attempt at creating a to-do list is not working when I try to add a new entry. Any suggestions? Also, I plan to implement a feature that can calculate the percentage of tasks completed by crossing them off the list. <html> <head> <titl ...