Getting XMLHttpRequest error when using flutter web but works in mobile app

Question

https://pastebin.com/Uy9r8bEP I am trying to connect web api with flutter web and while it works in mobile it doesnt work in web. I have read and found out the reason is because of CORS. I tried enabling it from flutter and web API side (for web api im using asp.net core web api) and it didn't work. Then I tried disabling it from both sides. Still didnt work. This is the header I have

headers: {

          'Content-Type': 'application/json',
          "Access-Control-Allow-Origin": "*", // Required for CORS support to work
          "Access-Control-Allow-Credentials": "true", // Required for cookies, authorization headers with HTTPS
          "Access-Control-Allow-Headers": "Origin,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,locale",
          "Access-Control-Allow-Methods": "POST, OPTIONS"
        },

Dart/Flutter: Http request raises XMLHttpRequest error I even added disable web security (made sure to add the comma too) but it still didn't work. Does anyone have any other suggestions as to how to make it work?

Provide us with the exact error message you're receiving, please. — ADyson
– ADyson, Commented Oct 14, 2022 at 11:54
This is the header I have...where, exactly? It looks like a JSON object, not something which would be part of an asp.net application. — ADyson
– ADyson, Commented Oct 14, 2022 at 11:55
@ADyson I have provided it. The error is in the link. That is the header I put in flutter. — curious student
– curious student, Commented Oct 15, 2022 at 13:49

rasityilmaz · Accepted Answer · 2022-10-14 11:57:51Z

2

On Flutter Web get your launcher on a fixed port.

And add the fixed domain name to the allowed fields like this.

     var builder = WebApplication.CreateBuilder(args);
    builder.Services.AddCors(options => options.AddPolicy("CorsPolicy", builder => {
          builder.AllowAnyMethod().AllowAnyHeader().WithOrigins(
              "https://localhost:7261",
              // add here
              "http://localhost:52960")
              .AllowCredentials();
      }));

var app = builder.Build();
app.UseCors("CorsPolicy");

VsCode launch.json

  "configurations": [
        {
            "name": "name",
            "request": "launch",
            "type": "dart"
        },
        {
            "name": "name (const port)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "debug",
            "args": ["--web-port=52960"]
        },
        {
            "name": "name (release mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "release"
        }
    ]

edited Oct 14, 2022 at 11:57

answered Oct 14, 2022 at 11:53

rasityilmaz

1,4521 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

curious student Over a year ago

I added the fixed domain to be "localhost:52960" and also added [EnableCors("CorsPolicy")] on top of the HTTPPost (even tried without it) but it didnt work. For the configuration, should I add something in const port and release mode? If so, what?

rasityilmaz Over a year ago

Yes because your flutter web project will start from a different port every time you start it so you need to fix it

curious student Over a year ago

I used this command line to run it on a fixed port flutter run -d web-server --web-port 52960

rasityilmaz Over a year ago

Well did you solve your problem?

curious student Over a year ago

Unfortunately it did not

|

Collectives™ on Stack Overflow

Getting XMLHttpRequest error when using flutter web but works in mobile app

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related