XMLHttpRequest Error - CORS Issue in Flutter Web(C#)

Question

I have enabled the CORS in my c# web API project like following:

Tried to enable CORS globally

 public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {

            var cors = new EnableCorsAttribute("*", "*", "*");
            config.EnableCors(cors);

            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }

and ApiController Level


    [EnableCors(origins:"*",headers:"*",methods:"*")]
    public class MyAppController: ApiController
    {
      [AllowAnonymous]
        [HttpGet]
        public HttpResponseMessage TestApi()
        {
        }
    }

Flutter Code

 final response =
      await http.get(Uri.parse('http://localhost:44310/api/MyApp/TestApi'));

  if (response.statusCode == 200) {
    // If the server did return a 200 OK response,
    // then parse the JSON.
    return response.body;
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    throw Exception('Failed to load album');
  }

But, neither works and still getting XMLHttpRequest error in Flutter Web.

Also, in the Network Tab, Browser does not show anything for the particular API request.

it hits the API and sends a response from API but not received as a response in Flutter Web.

Reference is taken from here to enable CORS for C# Web Api project attribute: https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

Am I missing anything?

Does this answer your question? [How to support HTTP OPTIONS verb in ASP.NET MVC/WebAPI application](https://stackoverflow.com/questions/19095777/how-to-support-http-options-verb-in-asp-net-mvc-webapi-application) — Spatz, Jun 05 '21 at 06:02
I don't know why the code mentioned in question did not work because for Web API, it should work as it is mentions in third source. Anyway, adding the IIS7 config into the web.config worked for me. — Code Runner, Jun 05 '21 at 15:38

score 1 · Answer 1 · answered Jun 04 '21 at 20:27

For IIS7 and Later: Source

Just add the following code to your web.config.

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

For IIS 6, follow the following steps: Source

Open Internet Information Service (IIS) Manager
Right-click the site you want to enable CORS for and go to Properties
Change to the HTTP Headers tab
In the Custom HTTP headers section, click Add
Enter Access-Control-Allow-Origin as the header name
Enter * as the header value
Click Ok twice

CORS on ASP.NET : Source

If you don't have access to configure IIS, you can still add the header through ASP.NET by adding the following line to your source pages:

Response.AppendHeader("Access-Control-Allow-Origin", "*");

Other Platforms visit : Source.

It was the right solution. thank you – Mehdi Rahimi Mar 28 '22 at 07:42 — Mehdi Rahimi, Mar 28 '22 at 07:42

XMLHttpRequest Error - CORS Issue in Flutter Web(C#)

1 Answers1

For IIS7 and Later: Source

For IIS 6, follow the following steps: Source

CORS on ASP.NET : Source

Other Platforms visit : Source.