How to enable CORS for flutter web app using spring boot api

Question

I am currently learning flutter web and have created a simple spring boot api, but I keep receiving the error for any network request stating

Access to XMLHttpRequest at 'http://localhost:8080/api/v1/auth/authenticate' from origin 'http://localhost:53289' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have tried adding @CrossOrigin to my controller and event attempted adding a filter in spring but not with any luck.

For reference here is my controller

@RestController
@RequestMapping("/api/v1/auth")
class AuthenticationController(
    private val authenticationService: AuthenticationService
) {

    @PostMapping("/register")
    fun register(
        @RequestBody request: RegisterRequestBody
    ): ResponseEntity<AuthenticationResponse> {
        return ResponseEntity.ok(authenticationService.register(request))
    }
    @PostMapping("/authenticate")
    fun register(
        @RequestBody request: AuthenticationRequest
    ): ResponseEntity<AuthenticationResponse> {
        return ResponseEntity.ok(authenticationService.authenticate(request))
    }
}

And here is the network request code in flutter

class AuthenticationApi {
  var uri = Uri.http("localhost:8080","/api/v1/auth/authenticate");

  Future<String?> loginWithCredentials(String username, String password) async {
    var body = jsonEncode(loginBody(username, password));
    final response = await http.post(uri, body: body);
    if (response.statusCode == 200) {
      return response.body;
    } else {
      return null;
    }
  }
}

If anyone could help me see where I am gong wrong that would be great, thanks :)

I have tried adding @CrossOrigin to my controller and event attempted adding a filter in spring but not with any luck.

Answer 1

Sry I just saw now, you are sending no headers?

make

final response = await http.post(uri, 
headers: {
        'Content-type': 'application/x-www-form-urlencoded',
        'Accept': 'application/json',

      },
body: body);

And pls try also your old uri again.

If still not working update headers:...
to

        headers: {
        HttpHeaders.acceptHeader: 'application/json',
        HttpHeaders.contentTypeHeader: 'application/json',
        HttpHeaders.cacheControlHeader: 'no-cache',
        HttpHeaders.pragmaHeader: 'no-cache',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
        'Access-Control-Allow-Headers': 'Origin, Content-Type, Accept, Authorization, X-Request-With',
        'Access-Control-Allow-Credentials': 'true',
      }

---OLD
I just had the same Problem! You can solve it with change this:

var uri = Uri.http("localhost:8080", "/auth/authenticate");
to
Uri uri = Uri.parse('localhost/');

If this works for you, can you give also my quesion thumps up :)