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

Leonardo Santos 1 Reputation point
2021-06-28T14:32:39.713+00:00

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?

JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
509 questions
ASP.NET MVC
ASP.NET MVC
A Microsoft web application framework that implements the model-view-controller (MVC) design pattern.
728 questions
No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Yijing Sun-MSFT 7,026 Reputation points
    2021-06-29T03:20:58.967+00:00

    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.