Outlook Add-in - Javascript based using React JS - VS Code + WebPack - Unable to call external Web Service

Question

Hi,

I am developing a new Outlook Add-in using the new web-based Office Add-In Development Toolkit, with React Fluent UI. Here is the link telling all about it:
https://learn.microsoft.com/en-us/office/dev/add-ins/overview/office-add-ins

For development, I am using VS Code and Yo-Office Node package. Along with it comes the Webpack Development Server which acts as the local development Web-Server for the Outlook Add-in. Basically, the new Add-in is web-based aapplication which eventually gets hosted on a Cloud/Web environment at the time of production deployment. But, for development, it requires a local development Web Server which it would be hosted at and run on.

And with this webpack development Web Server, I am having hard time calling web services which are hosted outside the development environment and are very much avaialable publically. And I am unable to call these web services using the AXIOS JavaScript library from this Outlook Add-in.

The webPack Server runs on HTTPS on localhost. And there are two types of errors that I am getting:

1. Mixed Error - This request has been blocked; the content must be served over HTTPS.
   This error is faced when I try to call an externally hoster web service which has a non-HTTPS URL, basically a simple HTTP address.
2. CORS Error - No 'Access-Control-Allow-Origin' header is present on the requested resource.
   This error is faced when the web service is there on HTTPS - no matter whether it returns a JSON or SOAP response.

Any help on this would be much appreciated.

Thank you, all!

• Arun