Why do I have a Flutter web CORS issue despite having set CORS in django backend

I'm developing a Flutter web application that needs to make requests to a Django backend. However, I'm encountering a CORS error when I try to make a request. The error message is:

Access to XMLHttpRequest at '<API_URL>' from origin 'http://localhost:63730' 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've already set up CORS in my Django settings as follows:

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ORIGIN_ALLOW_ALL = True

Despite this, I'm still getting the same CORS error. Interestingly, I have other applications built with React and Vue that are able to make requests to the same Django backend without encountering any CORS errors.

I'm not sure why my Flutter web application is encountering CORS errors while my React and Vue applications are not. Any help would be greatly appreciated.

NB: I use the Dio package to make the request as so:

class DioWrapper {

 Dio _dio = Dio();

 Dio get dio => _dio;

  DioWrapper() {
    _dio.options = BaseOptions(
      baseUrl: Uri.encodeFull(
          "https://<my_api_url>/api"),
      receiveDataWhenStatusError: true,
      sendTimeout: const Duration(milliseconds: 60 * 1000),
      receiveTimeout: const Duration(milliseconds: 60 * 1000),
      // connectTimeout: 60 * 1000,
      validateStatus: (code) {
        return true;
      },
    );
}

}

And then the request:

final response = await dio.post<Map<String, dynamic>>('/auth/token/',
          data: jsonEncode(
              {Config.username: username, Config.password: password}));
      
Back to Top