Ionic application running within WPF using webview2 get CORS error if trying to connect to a localhost Asp.NET WebAPI server

Question

Ionic application running within WPF using webview2 get CORS error if trying to connect to a localhost Asp.NET WebAPI server

Peterjc 91

Hi, I have an Ionic application I am running within a .net 6 WPF application where it is hosted within WebView2. I have an asp.net WebAPI (/net framework 4.8) running on both my local dev machine (Windows 11), and a remote azure server. The WPF/Ionic application can connect an ajax call to the instance on the azure server no problems, however, when I try to connect to an instance running on my local machine, using the WebView 2 devtools, I see the following error

Access to XMLHttpRequest at 'http://localhost/test' from origin 'http://app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have the following code in the webview application.

// Map the folder the Ionic app to a virtual host name we can then use as a web view source
string appSourceFolder = $"{AppDomain.CurrentDomain.BaseDirectory}_app";
AppWebView.CoreWebView2.SetVirtualHostNameToFolderMapping(
    app", appSourceFolder, CoreWebView2HostResourceAccessKind.Allow);

AppWebView.Source = new Uri("http://app/index.html");

I remember when I was running the same app in a UWP we had to register the container etc to be able to connect to localhost, but I was sure we were now over this hurdle. Any ideas why I have having this problem Connecting to my local host, but not another instance of the server running elsewhere? Thanks in advance

Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff

2023-04-07T08:15:38.34+00:00

Hi,@Peterjc. Welcome Microsoft Q&A. Did you get the error in the wpf project? What is the code for your ASP.NET Core C# API? And what code do you use to call ASP.NET Core C# API?
Peterjc 91 Reputation points

2023-04-07T08:33:59.85+00:00
Hi, yes the Access to XMLHttpRequest at 'http://localhost/test' from origin 'http://app' has been blocked by CORS policy error is coming from the WPF project, where I am doing an ajax call in the Ionic application which is hosted within the webview. The Ionic application does the ajax call via JavaScript (the Angular http client). eg from the devtools...

I also tried adding the following I saw in another post..

var op = new CoreWebView2EnvironmentOptions("--disable-web-security"); var env = await CoreWebView2Environment.CreateAsync(null, null, op); await AppWebView.EnsureCoreWebView2Async(env);

But unfortunately did not help. The server is .net framework 4.8 where I also have the code app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); I only have this problem when trying to connect to the server running on my localhost. The remote instance running on a Azure server works fine.
Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff

2023-04-07T09:18:19.4466667+00:00

Hi,@Peterjc.Thanks for the feedback, I'm not sure what the problem is. You could try to see if you have similar code to the problem A or problem B see if its solution helps you.
Peterjc 91 Reputation points

2023-04-07T09:26:20.24+00:00

Hi @Hui Liu-MSFT thanks for the feedback. The problem has been solved! I didn't realise there was a some error in my local dev server! I had to rebuild it and all was fine again - the CORS error was jus a weird side affect. All the code, does work as expected.
Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff

2023-04-07T09:30:02.8+00:00

Hi,@Peterjc. Glad to hear your problem is solved.

Your answer

Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff

2023-04-07T08:15:38.34+00:00

Hi,@Peterjc. Welcome Microsoft Q&A. Did you get the error in the wpf project? What is the code for your ASP.NET Core C# API? And what code do you use to call ASP.NET Core C# API?
Peterjc 91 Reputation points

2023-04-07T08:33:59.85+00:00

Hi, yes the Access to XMLHttpRequest at 'http://localhost/test' from origin 'http://app' has been blocked by CORS policy error is coming from the WPF project, where I am doing an ajax call in the Ionic application which is hosted within the webview. The Ionic application does the ajax call via JavaScript (the Angular http client). eg from the devtools...

I also tried adding the following I saw in another post..

var op = new CoreWebView2EnvironmentOptions("--disable-web-security"); var env = await CoreWebView2Environment.CreateAsync(null, null, op); await AppWebView.EnsureCoreWebView2Async(env);

But unfortunately did not help. The server is .net framework 4.8 where I also have the code app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); I only have this problem when trying to connect to the server running on my localhost. The remote instance running on a Azure server works fine.
Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff

2023-04-07T09:18:19.4466667+00:00

Hi,@Peterjc.Thanks for the feedback, I'm not sure what the problem is. You could try to see if you have similar code to the problem A or problem B see if its solution helps you.
Peterjc 91 Reputation points

2023-04-07T09:26:20.24+00:00

Hi @Hui Liu-MSFT thanks for the feedback. The problem has been solved! I didn't realise there was a some error in my local dev server! I had to rebuild it and all was fine again - the CORS error was jus a weird side affect. All the code, does work as expected.
Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff

2023-04-07T09:30:02.8+00:00

Hi,@Peterjc. Glad to hear your problem is solved.

Share via

Ionic application running within WPF using webview2 get CORS error if trying to connect to a localhost Asp.NET WebAPI server

Your answer