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

Question

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:

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?

Answer 1

Hi @Leonardo Santos ,
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.