0

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?

curious student
  • 25
  • 4
  • try https://stackoverflow.com/q/71157863/10157127 – Md. Yeasin Sheikh Oct 14 '22 at 11:52
  • Provide us with the exact error message you're receiving, please. – ADyson Oct 14 '22 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 Oct 14 '22 at 11:55
  • @YeasinSheikh I have tried it. It doesn't work either – curious student Oct 15 '22 at 13:48
  • @ADyson I have provided it. The error is in the link. That is the header I put in flutter. – curious student Oct 15 '22 at 13:49
  • You don't pug CORS headers on the client side code...it doesn't work and can actually make it worse. If you think about it, if the client code could set any website it wanted to allow CORS requests, then CORS would be completely pointless. See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS if you need a reminder about how CORS works – ADyson Oct 15 '22 at 17:19

1 Answers1

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"
        }
    ]
rasityilmaz
  • 764
  • 1
  • 6
  • 11
  • I added the fixed domain to be "http://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? – curious student Oct 15 '22 at 14:12
  • Yes because your flutter web project will start from a different port every time you start it so you need to fix it – rasityilmaz Oct 15 '22 at 14:17
  • 1
    I used this command line to run it on a fixed port flutter run -d web-server --web-port 52960 – curious student Oct 15 '22 at 17:01
  • Well did you solve your problem? – rasityilmaz Oct 15 '22 at 17:33
  • Unfortunately it did not – curious student Oct 16 '22 at 13:43
  • All right, now let's make sure you do all the steps correctly. 1- You added the AddCors operation to the Program.cs file of the C# project as in my answer, and added this initializer method after the app parameter as you named it in AddPolicy. => app.UserCors("policyName") – rasityilmaz Oct 16 '22 at 15:47
  • 2- You have added the domain name of the project you are running on flutter web into the WithOrigins() parameter in Cors. For example, if your flutter project is running at an address such as http://localhost:52960, you must have added this address. 3- When running your flutter web project, you must make sure you run it from the allowed link address. – rasityilmaz Oct 16 '22 at 15:47
  • https://pastebin.com/Ff2s9tUX this is my program.cs file. https://pastebin.com/sPp5BExS and this is my launchsettings file – curious student Oct 18 '22 at 05:32