question

LeonardoSantos-9663 avatar image
0 Votes"
LeonardoSantos-9663 asked YijingSun-MSFT answered

Excel on the web Add-in using ASP.Net in server-side with CORS problems

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:

109857-errors.png

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 see these documents and tried to modify the HTTP response headers but it doesn't work.

CORS

ewa-refused-to-get-unsafe-header-quotxendsessionquot

OBS: Everything is hosted at the same domain

Can you give me some direction?


dotnet-aspnet-mvcoffice-js-dev
errors.png (37.8 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

YijingSun-MSFT avatar image
0 Votes"
YijingSun-MSFT answered

Hi @LeonardoSantos-9663 ,
If you don’t control the server your frontend code is sending a request to, and the problem with the response from that server is just the lack of the necessary Access-Control-Allow-Origin header, you can still get things to work—by making the request through a CORS proxy.

You can easily run your own proxy using code from https://github.com/Rob--W/cors-anywhere/.
You can also easily deploy your own proxy to Heroku in just 2-3 minutes, with 5 commands:

 git clone https://github.com/Rob--W/cors-anywhere.git
 cd cors-anywhere/
 npm install
 heroku create
 git push heroku master

After running those commands, you’ll end up with your own CORS Anywhere server running at, e.g., https://cryptic-headland-94862.herokuapp.com/.

Now, prefix your request URL with the URL for your proxy:

 https://cryptic-headland-94862.herokuapp.com/https://example.com

Adding the proxy URL as a prefix causes the request to get made through your proxy, which then:

  1. Forwards the request to https://example.com.

  2. Receives the response from https://example.com.

  3. Adds the Access-Control-Allow-Origin header to the response.

  4. Passes that response, with that added header, back to the requesting frontend code.

The browser then allows the frontend code to access the response, because that response with the Access-Control-Allow-Origin response header is what the browser sees.

This works even if the request is one that triggers browsers to do a CORS preflight OPTIONS request, because in that case, the proxy also sends back the Access-Control-Allow-Headers and Access-Control-Allow-Methods headers needed to make the preflight successful.

More details,you could refer to below article:
https://stackoverflow.com/questions/46277295/xmlhttprequest-blocked-by-cors-policy
Best regards,
Yijing Sun


If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.