Flutter Web: Http request is unable to send my header named 'Cookie', is there a way to fix this?

Question

I am calling my API which require a header named 'Cookie' for user auth. I'm using the Http package to make the call and everything is working fine in my Android and iOS app. Now I'm testing my app on web but my API calls are failing. Getting this error -> Refused to set unsafe header "Cookie"

This is the code:

Future<UserData> getUserData() async {
    try {
      final response = await http.get(
        Uri.parse(_baseUrl),
        headers: {
          'Content-type': 'application/json; charset=utf-8',
          'Cookie': _authHeader,
        },
      );

      if (response.statusCode == 200) {
        return UserData.fromJson(response.body);
      } else {
        return Failure(message: 'Failed to get data!');
      }
    } catch (e) {
      return Failure(message: e.toString());
    }
  }

When I run this code on Android or iOS it works perfectly but when I run it on Web the browser does not send the header named 'Cookie' and the call fails. This happens on localhost as well as in the production which is hosted on a secured domain.

I tried some solutions but nothing worked, I have also updated the CORS policies on my server and allowed my localhost port and my domain there, still no change.

On my flutter code I tested this but no difference

Future<UserData> getUserData() async {
    try {
      final webClient = (http.Client() as BrowserClient)
        ..withCredentials = true;

      final response = await webClient.get(
        Uri.parse(_baseUrl),
        headers: {
          'Content-type': 'application/json; charset=utf-8',
          'Cookie': _authHeader,
        },
      );

      if (response.statusCode == 200) {
        return UserData.fromJson(response.body);
      } else {
        return Failure(message: 'Failed to get data!');
      }
    } catch (e) {
      return Failure(message: e.toString());
    }
  }

Answer 1

Has anyone been able to address his question? I've tried several different approaches, but none of them have been successful. We are using ROR backend and Hosted on Heroku.

Findings:

• Implement Dio Request with flutter web and tried to make modifications to the headers such as adding custom cookies, however the iOS platform blocked them and cookies could not be seen in browser requests..
• it's working when we tried to Off settings from safari (Prevent cross-site tracking in Safari on Mac) but in our case, we can't disable the program.
• Different tries with header like withCredentials = true but no luck

• If you wanna test on Dev Environment then disable Prevent cross-site tracking is useful but not for production.

Example

import 'package:dio/adapter_browser.dart';
import 'package:dio/dio.dart';

class Api {
   static Dio dio(String url) {
   BaseOptions options =  BaseOptions(
     connectTimeout: 10000,
     receiveTimeout: 5000,
     baseUrl: url,
     headers: {
      "Accept": "application/json",
      'Content-type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest',
     },
   );


    var _dio = Dio(options);
    var adapter = BrowserHttpClientAdapter();
    adapter.withCredentials = true;
    _dio.httpClientAdapter = adapter;
   return _dio;
  }
}