How come the error message in AngularJS is appearing as blank during error handling?

When utilizing AngularJS code to send a request to the server, everything works smoothly on success. However, deliberately redirecting the request to a different domain causes the CORS problem where the error handling function is triggered but errorData is empty. While debugging in Chrome, it shows that the error function is being executed and displays the message "No 'Access-Control-Allow-Origin' header is present on the requested resource." in the console, yet I am unable to access it within the code. How can I effectively log this error?

RemoteService.doRequestPromise().then(
function(resp) {
    LEService.logIt(resp);
    if (status != 200) {
        LEService.error(resp);
    }
},
function(errorData) {
    LEService.error({ 'err': errorData });
}).finally(function() {
    usSpinnerService.stop('spin1');
});

Answer №1

When angular encounters a failed CORS request, this is what it provides:

{
  "data": null,
  "status": 0,
  "config": {
    "method": "GET",
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "url": "https://some.site/thing",
    "headers": {
      "Accept": "application/json, text/plain, */*"
    }
  },
  "statusText": ""
}

Although there is no explicit mention of CORS, the status is shown as 0 and the statusText field is empty. A status of 0 may not occur frequently in other situations, warranting further investigation if absolute confirmation of a CORS error is necessary.

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

Navigating Between Modules Using ui-router in Angular: Best Practices

One of the great things about working with Angular is the ability to divide functionality into modules to support multiple applications. For example, if I have two apps that could both benefit from the same "User" module, I can simply include that module i ...

What is the best method for uploading a file through ajax in Django?

Just diving into this. Can someone guide me on how to use ajax to send a file to the server? I've managed to submit a String to my server, but I'm unsure about handling a File with ajax. upload_files.js $(document).on('submit', ' ...

What is the process for removing a specific row from a datatable?

I have implemented a data-table using Vue and Vuetify. When I click on the delete icon in a specific row, a snackbar pops up with two buttons - yes and no. If I click on the yes button, I want to delete that specific row. How can I achieve this functionali ...

What is the process for showcasing specific data using Vue.js?

{ "status": "ok", "source": "n", "sortBy": "top", "articles": [ { "author": "Bradford ", "title": "friends.", "url": "http: //", "urlToImage": "http://" }, { ...

The $digest function in Angular's $rootScope

While engrossed in the incredible book, Mastering Web Development in AngularJS, I stumbled upon this code snippet: var Restaurant = function ($q, $rootScope) { var currentOrder; this.takeOrder = function (orderedItems) { currentOrder = { deferred ...

What is the best way to combine two arrays into a single array using AngularJS?

Here is a code snippet: $scope.studentDetails=[]; $scope.studentDetails=[0][id:101,name:one] [1][id:102,name:two] [2][id:103,name:three] $scope.studentMarks=[]; $scope.studentMarks=[0][id:101,marks:78] ...

Protractor unexpectedly giving back a promise instead of the expected attribute value

I'm facing a challenge where I am attempting to extract the value of an HTML attribute and store it in a variable named url_extension. However, instead of getting the desired value, I keep receiving a Promise object. Below is my code snippet: (Please ...

Return all HTML code from the Ajax element

I can't seem to pinpoint the issue with my code. When I make an ajax call using the code below: ajax.js: function ajaxObj(meth, url){ var x = new XMLHttpRequest(); x.open(meth, url, true); x.setRequestHeader("Content-type", "application/x-www_form-u ...

Minimize/Maximize Swagger Response Model Class View

After successfully integrating Swagger API documentation with my rest services, I encountered a challenge. The Swagger page appears too lengthy due to the numerous response classes in my project, requiring users to scroll extensively to find information. ...

Instructions for executing the ng command in Ubuntu

Recently, I installed nodejs on my Ubuntu 16.04 using the commands: sudo apt-get update sudo apt-get install nodejs sudo apt-get install npm To verify the installation, I ran the command which nodejs and it returned /usr/bin/nodejs My goal is to run ...

`To activate/deactivate tabs by choosing options from drop-down menus`

Hey there, I'm currently dealing with a combo box that has 5 drop down items in Tab1. There are also other tabs present such as tab2, tab3, tab4, and tab5. Tab1 is enabled while the other tabs are disabled. Each of the disabled tabs contains different ...

Develop a Windows 8.1 Store App using VS Cordova and AngularJS

After downloading and implementing the two AngularJS demos from the links below, The demos functioned properly on WP8 and Android devices. However, upon deployment to Windows 8 Store App, the input box malfunctioned in both cases. I attempted using both ...

Fetching Date and Time from the Internet using PHP

While I understand that similar questions have been asked numerous times before, I have yet to find a solution that fits my specific needs. My question is regarding how to retrieve the current date and time from the internet rather than relying on the loc ...

Utilizing useQuery() with API route parameters in Nuxt 3: A Step-by-Step Guide

I've been following a tutorial on building api routes and the process is as follows: 1. Start by creating a new file called server/api/route.js: export default defineEventHandler((event) => { return { message: `hello api route` } ...

Scroll bar displayed on a non-editable text box

The TextArea is currently set to readonly mode using "ng-readonly," which is causing the scrollbar-thumb not to appear. It's important to note that I am not utilizing webkit in this scenario. Below is the HTML code being used: <textarea dataitemfq ...

Creating interactive buttons with CSS and jQuery

As a newcomer to coding, I'm trying my hand at creating two buttons that transition from green to blue with a single click, and eventually incorporating them into a live website. The functionality I'm aiming for includes: Both buttons startin ...

Issue with Vue.js input not updating with v-model after input sanitization in watch handler

Recently, while working with Vue 2.6, I came across an unusual issue when trying to sanitize user input. The main culprit seemed to be a custom component that housed the input field. Here's a simplified version of it: <template> <input :na ...

Transforming a base64 encoded string into a byte array

I have implemented a form where users can upload images to the page using an <input id = "fileLoader" type = "file" />. With JavaScript, I convert these uploaded images to base64 and send them to the server. On the server side, I need to decode this ...

What is the best approach for incorporating sub-navigation within a page popup in a Next.js project?

In the midst of my Next.js project, there is a requirement to showcase a chat popup consisting of multiple sub-pages like user registration, conversation page, and more. Hence, seamless navigation inside this popup is necessary. The idea is not to alter th ...

Transitioning Dropdowns in Angular UI Bootstrap

Hello everyone, I am completely new to both Stack Overflow and AngularJS. I'm attempting to incorporate a fade-in animation into my dropdown (using UI Bootstrap's dropdown directive) without success. This issue is quite similar to the following ...