Enable CORs in Debugging Mode

FreeSoftwareServers commented 1 year ago

Greetings,

I've been working in Visual Studio 2017 for some time w/ Office Apps. I'd like to debug in Edge (was using IE engine w/ VS 2017) as I noticed all my end users are using Edge now as the browser engine. But, when I launch the Add-In using Edge, it gives me CORs errors when fetching internal API from localhost.

The internal API has CORs enabled for the production URL, but I don't think its correct for me to ask the backend team to enable localhost as CORs URL, shouldn't I be able to disable CORs in Edge for debugging locally?

To me, this would have to be configured in Excel somehow, as Excel is launching the Edge process.

Is the only workaround to ask IT to enable localhost in the backend CORs or can this be configured from Excel? Most browsers have this functionality for debugging/dev websites, but as Excel launches Edge, I have little control of that part.

See --> https://stackoverflow.com/questions/76989016/launch-edge-from-visual-studio-code-with-cors-debug-office-app

Adrian-MSFT commented 11 months ago

Hi @FreeSoftwareServers ,

Just a few clarifying questions:

The stackoverflow post mentions VS Code but this github post mentions Visual Studio 2017 - What environment are you using for this?
What is running in localhost and what is running in the backend with IT?
Are you running the add-in from localhost but trying to access content from another domain? If so, do you have the AppDomains element set up in your manifest? https://learn.microsoft.com/en-us/javascript/api/manifest/appdomains?view=common-js-preview

FreeSoftwareServers commented 11 months ago

Hey @Adrian-MSFT

The stackoverflow post mentions VS Code but this github post mentions Visual Studio 2017 - What environment are you using for this?
- I have both VS Studio and VS Code setup for debugging
What is running in localhost and what is running in the backend with IT?
- I debug on localhost running the webserver and the backend with IT is running APIs
Are you running the add-in from localhost but trying to access content from another domain? If so, do you have the AppDomains element set up in your manifest? https://learn.microsoft.com/en-us/javascript/api/manifest/appdomains?view=common-js-preview
- I have added the domains to the manifest that I am trying to contact

Again, I want to re-iterate two things. One is that I have no issues when using IE as the browser engine, but want to use Edge. Second is that most browsers support a launch flag that disables CORs verification when debugging from localhost.

See here for example for how to do this w/ Chrome --> https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome

And here is Edge --> https://stackoverflow.com/a/67218902/5079799

Edge seems to be trickier/more unreliable then Chrome (what a surprise). The ability to use an Add-On Extension for the browser might be an option. Regardless, I'm sure many people have this issue and it should be resolvable from the Dev terminal without adjusting the backend settings.

Adrian-MSFT commented 11 months ago

Hi @FreeSoftwareServers,

Do you have an example manifest and JS (or just an example add-in) that has a minimal repro for this issue that you can share?

FreeSoftwareServers commented 10 months ago

@Adrian-MSFT I don't have anything handy, but this isn't really Add-In specific. Try this basic HTML and it will fail due to CORs. But as developers, we often disable CORs during development on localhost and this should be an option when debugging Add-In. Perhaps a flag for npm that starts edge with CORs disabled.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>CORS Tester</title>
    <script>
        var URL_STR = 'https://finance.yahoo.com/quote/MSFT'
        async function Do_Fetch() {
            const response = await fetch(URL_STR);
            console.log('response')
            console.log(response)
        }
    </script>

</head>

<body>
    <input type="button" onclick="Do_Fetch()">
</body>

</html>

FreeSoftwareServers commented 9 months ago

@Adrian-MSFT Hey, just checking in. I'm growing quite tired of having to switch between IE/VStudio and VSCode just because I can't access CORs resources when using Edge. Do you understand the problem? Anything further I can do?

Adrian-MSFT commented 9 months ago

Hi @FreeSoftwareServers. I apologize for the delayed response and thank you for your patience. I have reached out to the edge webview team about this and will update you when I hear back from them.

FreeSoftwareServers commented 9 months ago

@Adrian-MSFT Appreciate the update! Let me know.

Adrian-MSFT commented 9 months ago

Hi @FreeSoftwareServers, I appreciate your patience. I reached out to the webview team and they suggested to create the environment variable with the following value: WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS = --disable-web-security

With this value, the webview process should have CORs disabled when launched by Office.

You may need to restart all Office applications after setting that environment variable.

FreeSoftwareServers commented 9 months ago

Hi @FreeSoftwareServers, I appreciate your patience. I reached out to the webview team and they suggested to create the environment variable with the following value: WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS = --disable-web-security

With this value, the webview process should have CORs disabled when launched by Office.

You may need to restart all Office applications after setting that environment variable.

That sounds very promising!! I want to confirm, is that a windows environment variable then? Or NPM? @Adrian-MSFT

FreeSoftwareServers commented 9 months ago

@Adrian-MSFT I can confirm it worked using setx WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS --disable-web-security

OfficeDev / Office-Addin-Scripts

Enable CORs in Debugging Mode #806