What might be the underlying reason for Chrome displaying a net::ERR_FAILED error when attempting to make a request from a Vue frontend to a C# API using Axios?

I have a C# Backend+API that I interact with from my Vue Application using axios to make requests. In the C# code, there is an endpoint that looks like this:

  // GET: api/Timezone
        public HttpResponseMessage GetTimezoneData()
        {
            var timezones = _service.GetSmcTimezones();
            var osTimezones = _service.GetOSTimezones();
            var resp = JsonConvert.SerializeObject(osTimezones);
                
                //new JsonResult { Data = osTimezones, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

            var response = Request.CreateResponse(HttpStatusCode.OK);
            response.Content = new StringContent(resp, System.Text.Encoding.UTF8, "application/json");

            return response;
        }

In the frontend, I access this request using the following code:

const config:AxiosRequestConfig = {
  method: 'get',
  url: 'https://localhost:44333/api/Timezone/',
  headers: { }
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});
  }
}

What's strange is that I can successfully retrieve data using Postman, but when sending the request from the frontend, it fails. I receive a (failed)net::ERR_FAILED error code and no response data. Does anyone have any insights on this issue?

Answer №1

Did you attempt to define the Content-Type header?

const options:AxiosRequestConfig = {
  method: 'post',
  url: 'https://example.com/api/Data/',
  headers: {
        "Content-type": "application/json"
    }
};

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

Obtain both the key and value from an Object using Angular 2 or later

I have a unique Object structure that looks like this: myCustomComponent.ts this.customDetails = this.newParameter.details; //the custom object details are: //{0: "uniqueInfo", // 5: "differentInfo"} The information stored in my ...

Utilize Typescript with React to efficiently destructure and spread objects

My goal is to maintain my child components as stateless (functional components). Therefore, I am in search of an efficient way to pass down the root component's state values to its children. For example, interface IState { a: string; b: number; ...

Learn how to send an SMS using Angular and Ionic 4 without having to open the native SMS app

I have been actively monitoring the GitHub repository for the Ionic Native SMS plugin at https://github.com/cordova-sms/cordova-sms-plugin. Following the suggested configuration from the repo, I have set it up as follows: var options = { repla ...

How can I toggle the visibility of an accordion panel using Jquery when clicking the "edit" button within a gridview

Is there a way to toggle an accordion panel based on the row clicked in an ASP.NET GridView? I have a jQuery Accordion above the GridView and would like to show/hide specific panels when clicking the edit button. Can this be achieved within the GridView_ ...

Guide on adding Russian characters into a SQL Server database table

While attempting to insert Russian characters into an SQL table with a data type of Nvarchar(max), I encountered an issue. After inserting the Russian value "Македонски", the table values turned into "??????????". Unfortunately, I am unable to m ...

Preventing Bootstrap modal from closing when clicking outside of the modal in Angular 4

I'm working with Angular 4 and trying to prevent the model from closing when I click outside of it. Below is the code snippet I am using: <div id="confirmTaskDelete" class="modal fade" [config]=" {backdrop: 'static', keyboard: false}" ro ...

The correlation between methods in programming languages

Can a class or object be created with type constraints between methods? abstract class Example<T>{ abstract methodOne(): T abstract methodTwo (arg: T):any } I am looking to ensure that the argument of methodTwo is the same type as the return ty ...

How can the Singleton pattern be properly implemented in Typescript/ES6?

class Foo{ } var instance: Foo; export function getFooInstance(){ /* logic */ } or export class Foo{ private static _instance; private constructor(){}; public getInstance(){/* logic */} } // Use it like this Foo.getInstance() I would ...

A guide to showing JSON data in reverse order on a Vue.js HTML page

Here is the order of my JSON data: {"data": {"pid": 50, , "location": {"lat": 10.0520222278408, "lon": 76.5247535705566, "state": "Kerala", "country": "India"}, "package": 0, "contact": {"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_emai ...

What is the process for executing "npm run start" in the Azure DevOps release pipeline to initiate a production build for NUXTJS?

I am in the process of setting up CI/CD for my Nuxt application to be deployed on a Windows server. I have completed all the necessary steps such as file copying, npm installation, and running npm build. However, I am facing an issue with the final step wh ...

At the beginning of the application, access the Ionic Secure Storage using the get() method

I am facing an issue with retrieving a token for validating an Auth status in the /src/main.ts file: if (TokenService.getAccessToken() !== undefined) { ... } Here is my token.service.ts file: import storage from '@/plugins/storage' const ACCESS ...

Retrieve a specific element from an array list

Hey everyone, I'm facing a problem in my application where I need to extract a specific value from my array and display it in a table for users to see. Check out the code snippet below: Here's my mock data: { "Data": "2020-0 ...

What is the best way to display various components based on the user's device type, whether it be web

How can I use Angular 7, TypeScript, bootstrap, ngx-bootstrap, etc., to switch between components based on the user's device (desktop vs mobile)? I have noticed that many websites display different components when resized. I wonder if these are simpl ...

Tips on including a trash can symbol to rows in a bootstrap table using React

I am working on a table that contains various fields, and I want to add a trash icon to each row so that when it is clicked, the specific row is deleted. However, I am encountering an issue where the trash icon is not showing up on the row and I am unable ...

Encountering an issue with Angular2 while attempting to map data from a WebAPI (Error: Unable to perform data differentiation

I've been struggling to retrieve data from an API and display it in a list using ngFor. I've experimented with promises, observables, map, subscribe, async pipe, but haven't had any success. It seems like the API is being called, but I keep ...

A step-by-step guide to creating a straightforward deep nested route in a Nuxt

I'm having trouble with routing using nuxt. For instance, I have a url structured like this: www.example.com/slug1/slug2/slug3/slug4. In standard nuxt routing, it would require the following folder structure: pages //main page _slug1 //folder for ...

Is it possible to use v-if when dealing with data that is loaded after computation

I am facing a challenge where I need to hide a component based on data that is loaded in the mounted lifecycle hook. However, it seems that using v-if with computed properties only is causing an issue because the data is not ready yet (since computed is ca ...

Can Nuxt2 be integrated with Vue3 packages?

During the development of my blog, I have been utilizing Quill as my primary TextEditor through this GitHub link. However, upon transitioning from vue3 to nuxt for SSR (Server-Side Rendering), I encountered an issue related to the compatibility between q ...

Trigger a child-mounted event and retrieve it from the parent component

Imagine I have a component named child. There is some data stored there that I need to retrieve in the parent component. To accomplish this, I plan to emit an event in the childs mount using this.$emit('get-data', this.data), and then receive it ...

Implementing C# with Selenium to locate specific cells within a column using nested XPath

I need help with extracting specific data from a datagrid using XPath in Selenium. After gathering all the rows into an IList<IWebElement> with this XPath: .//*[@class='datagrid']/tbody/tr, it seems to be working fine. Now, I want to extr ...