fetch() partially working in office add-in

Question

I am building an office add-in, specifically to be used in Word. I also have an API that I built using Django that accepts and takes in data as 'formData'. Now, in my office add-in I have written a function with a custom fetch request:

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

When the code runs the API is getting called, my other backend also functions fine and uploads the file, but here in the add-in code, it throws TypeError: Failed to fetch. I tried adding debuggers and log statements after the fetch request, but it throws the TypeError (lineNumber: 30) so it goes directly into the catch block. I also tried handling the response through promises like this:

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;
    });  
  });

But this didn't work either. I can really use some help here. Thanks!

Are you testing on Windows, Mac, or Word online? What is the version of your OS and Office? — Rick Kirkham
– Rick Kirkham, Commented Oct 4, 2024 at 19:16

Mayank saini · Accepted Answer · 2024-10-05 08:46:18Z

1

I figured out that, if you've generated the project template using Yoman's yo office with TypeScript support, then by default the initialized project tries to access localhost:3000 over https. Because of this, it fails to find the compiled JavaScript file(s).

Solution While running the Add-in locally in dev mode, replace all the https://localhost:3000 calls to http://localhost:3000. You can also set https dynamically throughout the project using environment variables. This is kind of a hacky way to solve the problem, but it works flawlessly.

answered Oct 5, 2024 at 8:46

Mayank saini

1152 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

fetch() partially working in office add-in

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related