Office add-in experiencing intermittent issues with fetch() functionality

I am currently developing an office add-in specifically tailored for use in Word. Additionally, I have created an API utilizing Django that handles incoming data as 'formData'. Within my office add-in, I have implemented a function containing a custom fetch request:

 const response = await fetch('http://127.0.0.1:8000/api/v1/my-upload-api', {
      method: 'POST',
      body: formData
  });

Upon running the code, the API is successfully invoked, and my backend executes properly to upload the file. However, within the add-in code, I encounter a TypeError: Failed to fetch. Despite attempting to debug with log statements after the fetch request, the TypeError persists (lineNumber: 30) leading directly into the catch block. I also tried managing the response using promises in this manner:

const response = await fetch('http://127.0.0.1:8000/api/v1/upload-contracts', {
      method: 'POST',
      body: formData
  }).then((response) =>{
    response.json().then(result => {
      console.log(result);
      return result;
    });  
  });

Unfortunately, this approach did not resolve the issue. Any assistance would be greatly appreciated. Thank you!

Answer №1

After some investigation, I discovered that when the project template is generated using Yeoman's yo office with TypeScript support, the initialized project automatically attempts to connect to localhost:3000 via https. This leads to difficulties in locating the compiled JavaScript file(s).

Resolution: When running the Add-in locally in development mode, substitute all instances of https://localhost:3000 with http://localhost:3000. Alternatively, you can dynamically adjust the protocol to https across the entire project by utilizing environment variables. Although this method may seem like a workaround, it offers a seamless solution to the issue.

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

The item may be undefined and attempting to call a possibly undefined object is not allowed

Hey there! I created this map of functions to filter an object in a JSON file. For each key, I've defined a specific filter function. const filterMap: Map< string, (ticket: Ticket, filter: request) => boolean > = new Map(); filterMap.set ...

Implement a Vue TypeScript class component using the vuedraggable library

I am facing an issue while trying to import sortableJs/vuedraggable with a TS class component. Interestingly, when I utilize vuedraggable with a regular JS standard component, everything works smoothly. Below is the code snippet showing vuedraggable with ...

In TypeScript, what is the format in which the final type result of a generic utility type is shown?

After utilizing the provided code, I have encountered an issue with retrieving the ultimate type of type A in the editor. Despite my efforts, the editor persistently showcases the composite form of the generic utility, complicating the process of verifyi ...

Transferring data from HTML label to TypeScript

Looking for some assistance with this code snippet: <sh-toggle label='ABCD' id = 'ABCD'> </sh-toggle> I am trying to extract the value of the label in my TS file. Can anyone provide guidance on how this can be achieved? Whe ...

Breaking news in the world of programming! The @types/tabulator-tables import is causing a

When you install the following packages: npm install tabulator-tables npm install @types/tabulator-tables And then import them like this: import Tabulator from 'tabulator-tables'; You may encounter an error: Module Usage (Error node_modules @ty ...

Exploring Aurelia's Integration with ASP.NET Core Models

Recently, I've been delving into various JavaScript frameworks and made the decision to rework an ASP.Net Core MVC frontend using Aurelia. To kick things off, I utilized the SPA template. Everything has been smooth sailing so far - I’ve integrated ...

What is the correct way to input the 'name' HTML attribute in an Ant Design select element?

I am facing an issue with the 'name' attribute in my Ant Design Select component. When trying to set the 'name' attribute, I encountered an error message that is causing issues. https://i.stack.imgur.com/Lzb4t.png Ant Design Select Co ...

Retrieving the length of a Pipe in the parent component using Angular 2

In Angular2, I have created a custom pipe to filter an array based on type ID and year arrays. Here is how it is defined: @Pipe({name: 'highlightedWorksFilter', pure: false}) export class HighlightedWorksFilterPipe implements PipeTransform { tra ...

Having Trouble Setting Up a Proxy for my File in Typescript - Can't Locate it or Get it to Serve

Latest Update I discovered that placing my KioskTemplates.html file at the root of my testing folder resolved the issue. However, I am still curious if there is a way to use a relative path instead. Do I need to adjust the "basePath" in my karma.conf fi ...

Building Unique Password Validation with Angular 5

I'm attempting to implement custom password validation for a password field. The password must be a minimum of 8 characters and satisfy at least two of the following criteria but not necessarily all four: Contains numbers Contains lowercase letters ...

Angular 4 Filtering Pipe: Simplify Data Filtering in Angular

Attempting to replicate AngularJS's OrderBy feature. Working with an array like this, I am aiming to filter the cars by their car category. [ { "car_category": 3, "name": "Fusion", "year": "2010" }, { "car_category": 2, "na ...

Experiencing an Issue with NGINX Loading Vue 3 Vite SPA as a Blank White Page

I currently have the following NGINX configuration set up: events { worker_connections 1024; } http { server { listen 80; server_name localhost; location / { root C:/test; index index.html; ...

How can one change the data type specified in an interface in TypeScript?

I am currently diving into TypeScript and looking to integrate it into my React Native application. Imagine having a component structured like this: interface Props { name: string; onChangeText: (args: { name: string; value: string }) => void; s ...

What classification should be given to children when they consist solely of React components?

I'm encountering an issue where I need to access children's props in react using typescript. Every time I attempt to do so, I am faced with the following error message: Property 'props' does not exist on type 'string | number | boo ...

How can I ensure that all the text is always in lowercase in my Angular project?

Is there a way to ensure that when a user enters text into an input field to search for a chip, the text is always converted to lowercase before being processed? Currently, it seems possible for a user to create multiple chips with variations in capitaliza ...

Is the function signature defined by this Interface syntax?

While exploring some code, I came across the following: export interface SomeInterface<T> { <R>(paths: string[]): Observable<R>; <R>(Fn: (state: T) => R): Observable<R>; } After searching through the TypeScript do ...

What could be causing my TSC to constantly crash whenever I try to utilize MUI props?

Currently in the process of converting a JavaScript project using Next.js and Material UI to TypeScript. This is a snippet of code from one of my components. Whenever I include Props as an intersection type along with MUI's BoxProps, the TypeScript c ...

What is the proper way to implement a function with a value formatter when the column definition is already predefined within quotation marks in AG-Grid?

When working with JSON data that specifies columnDefs and uses valueFormatters as a function, it is essential to correctly format the valueFormatter. For instance, if the JSON data reads valueFormatter: "dateFormatter" instead of valueFormatter: ...

fresh perspective on the syncfusion schedule angular component

In customizing the Schedule component in Angular, I am interested in finding out if there is a way to specify the start time and end time for each day. I would like to set the start and end times for each individual day rather than having the same times a ...

Tips for programmatically focusing on a v-textarea using Vuetify and TypeScript

It feels impossible right now, I've attempted some unconventional methods like: (this.refs.vtextarea as any).textarea.focus() ((this.refs.vtextarea as Vue).$el as HTMLElement).focus() and so on... Javascript source code is quite complex for me to ...