3

I developed an Excel Add-in using JavaScript API (office.js). Then, I'm using an Asp.Net MVC at the server-side. This works fine on excel desktop, but custom functions don't work in Excel on the web. When I inspect the task pane it shows these errors:

Access to XMLHttpRequest at 'https://www.xxxxxx.com.br/dist/functions.json' from origin 'https://excel.officeapps.live.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Failed to load resource: net::ERR_FAILED https://www.xxxxxx.com.br/dist/functions.json

In Excel on the Web, the task pane and the commands work fine. The CORS problem in functions.json is strange because this archive belongs to the dist folder.

I saw this document and modified the HTTP response headers but it doesn't work.

CORS

OBS: Everything is hosted at the same domain

Can you give me some direction?

DeSanterra
  • 81
  • 1
  • 1
  • 8
  • I have the same problem. Functions work fine on desktop, but don't appear on Excel online. Buttons on the ribbon and taskpanes work fine. Have you figured it out? – Tomasz Decker Jul 23 '21 at 13:27
  • Yes, I added an 'Access-Control-Allow-Origin' header to allow the origin 'https://excel.officeapps.live.com' access to my application 'https://www.xxxxxx.com.br/dist/functions.json'. You can follow this document: https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-5.0#set-http-response-headers – DeSanterra Jul 23 '21 at 14:11
  • Code snippet: app.UseStaticFiles(new StaticFileOptions { OnPrepareResponse = ctx => { ctx.Context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); } }); – DeSanterra Jul 23 '21 at 14:16
  • Thanks. I tried to do it, but I created my add-in using Yeoman and not VS, so I don't use C# code. The only part of the code where I have "Access-Control-Allow-Origin" is webpack-config.js and it seems that it allows access to every address by default, but for dev. Should there be a similar code for final product and port 80? devServer: { headers: { "Access-Control-Allow-Origin": "*" }, https: (options.https !== undefined) ? options.https : await devCerts.getHttpsServerOptions(), port: process.env.npm_package_config_dev_server_port || 3000 } – Tomasz Decker Jul 28 '21 at 09:10
  • Yes, the Webpack dev server is just a feature to make the front-end development easy. If you wish to deploy in production is necessary to code the Back-End. This code will serve the dist folder static files. Then, you should add Access Control Allow Origin Header at the back-end code. – DeSanterra Jul 28 '21 at 14:56
  • So, should I modify webpack.config.js or functions.json? You added the code responsible for that in C#. Thank you for your time. – Tomasz Decker Jul 28 '21 at 15:31
  • You're welcome. In my case, I kept these elements in the Front-End. Then, I created a dot net project to serve the dist folder. You can check this Tutorial: https://channel9.msdn.com/series/officejs/End-to-End-Walkthrough-of-Excel-JavaScript-Add-in-Development – DeSanterra Jul 28 '21 at 17:01

1 Answers1

0

You just need to make sure your webserver that's serving the add-in files returns Access-Control-Allow-Origin header with value * for all requests (or at least /functions.json request).

If you're using nginx to host the add-in files then add to config:

location / {
    add_header 'Access-Control-Allow-Origin' '*' always;
}

https://serverfault.com/a/979627/450717

If using apache to host the files then use the mod_headers module:

Header always set Access-Control-Allow-Origin "*"

https://stackoverflow.com/a/35566100/1053362

Antoine Dahan
  • 574
  • 2
  • 9
  • 23