Problem with keycloak cors. No 'Access-Control-Allow-Origin'

Question

I use keycloak and hasura. I have a flutter web app. I retrive the JWT token from keycloak using flutter http. But I get this error:

XMLHttpRequest error.

Access to XMLHttpRequest at 'http://xxx.xx.xxx.xxx:8080/auth/realms
/hasura-app/protocol/openid-connect/token' from origin 
'http://localhost:5050' has been blocked by CORS policy: Request header
field access-control-allow-origin is not allowed by Access-Control-Allow-Headers 
in preflight response.

But when I use reqbin/curl and this curl command:

curl --request POST \
  --url http://xxx.xx.xxx.xxx:8080/auth/realms/hasura-app/protocol/openid-connect/token \
  --header 'Content-Type: application/x-www-form-urlencoded' \
  --data username=user \
  --data password=password \
  --data grant_type=password \
  --data client_id=hasura

it works. This is my flutter code:

String url = 'http://xxx.xx.xxx.xxx:8080/auth/realms/hasura-app/protocol/openid-connect/token';

      Map<String, String> headers = {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Access-Control-Allow-Origin': '*',
      };
    
      String body = 'username=user&password=password&grant_type=password&client_id=hasura';
    
      final response = await http.post(Uri.parse(url), headers: headers, body: body);
      print(response.body);

When I use --web-browser-flag "--disable-web-security" it works fine. But I cannot use this I need this for production. My app will be in the closed local network.

Answer 1

I fix it. I set Web Origins: * and Valid Redirect URIs: *. Like in the image: image

But the real problem is in flutter code - headers. I set headers in flutter to this:

Map<String, String> headers = {
    'Content-Type': 'application/x-www-form-urlencoded',
     'Access-Control-Allow-Origin': '*',
  };

This 'Access-Control-Allow-Origin': '*' should not be here. I remove him and all work.

Map<String, String> headers = {
    'Content-Type': 'application/x-www-form-urlencoded',
  };

So final flutter code is this:

String url = 'http://xxx.xx.xxx.xxx:8080/auth/realms/hasura-app/protocol/openid-connect/token';

  Map<String, String> headers = {
    'Content-Type': 'application/x-www-form-urlencoded',
  };

  String body = 'username=user&password=password&grant_type=password&client_id=hasura';

  final response = await http.post(Uri.parse(url), headers: headers, body: body);
  print(response.body);