Access to XMLHttpRequest at 'https://localhost:8000/lib/functions.json' from origin 'https://excel.officeapps.live.com' is blocked by CORS policy

Question

I'm trying to develop custom functions in Excel by JavaScript API. The environment is Mac OS and Excel Online (Chrome).

I follow the tutorial and install the certificate by npx office-addin-dev-certs install. I can find and run the defined custom functions in Excel Online. We can see that https://localhost:3000/dist/functions.json is well loaded in Dev Tools.

Now, I want to add custom functions to one existing application of mine. I modify the manifest file by adding elements for custom functions, copy functions.json and functions.js to the public/lib/ folder such that https://localhost:8000/lib/functions.json can be opened in a browser. Then I launch the application with the same certificate: PORT=8000 HTTPS=true SSL_CRT_FILE=/Users/softtimur/.office-addin-dev-certs/localhost.crt SSL_KEY_FILE=/Users/softtimur/.office-addin-dev-certs/localhost.key ./node_modules/.bin/react-scripts start. However, we can see that when loading https://localhost:8000/lib/functions.json, there is a CORS error and a red error icon on the left of the name functions.json; under the Preview and Response tabs, we see Failed to load response data: No data found for resource with given identifier.

Here are two screenshots with the working version on the left and the non-working version on the right:

Does anyone know what may be the reason why https://localhost:8000/lib/functions.json could not be well loaded?

Answer 1

It may because you are not set Access-Control-Allow-Origin header to the response of your sever localhost:8000. Comparing the screenshots, the response headers of 2 non-working cases don't have "Access-Control-Allow-Origin: *".

The tutorial template of Yeoman generator for Office Add-ins does configure that in webpack.config.js like below. So you may need to do similar things for the other server.

devServer: {
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
}

Answer 2

You clearly have a CORs issue, that needs to be configured at the server level (Webserver). But, you can disable CORs check if you want at the browser level, though it will need to be properly configured for production. The following will disable CORs check during development.

In elevated cmd prompt run :

setx WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS --disable-web-security

See here for more details --> Launch Excel via NPM and sideload Add-In using Edge with CORs - Debug Office App

Again, this is only useful for local development, production will require properly configured web server and you can also just properly configure your local webserver as another answer offer a solution for NPM