we are currently developing a small app with the flutter framework and facing an issue with https requests to our local development backend.
As a backend we are using a Python Django Server which we are running as a Docker Container within Docker compose. We are using a Nginx Proxy to handle the http and https requests.
The Nginx config file looks like this:
upstream randomName.moreRandomName {
server moreRandomName:8000;
}
server {
listen 80;
listen [::]:80;
server_name localhost 0.0.0.0 127.0.0.1 ;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
listen [::]:443;
server_name localhost 0.0.0.0 127.0.0.1 ;
ssl_certificate /etc/nginx/certs/fullchain.pem;
ssl_certificate_key /etc/nginx/certs/privkey.pem;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
location / {
proxy_pass http://moreRandomName:8000/;
}
}
It might be worth mentioning that the Django backend uses gunicorn in front of its service, which is bind on port 8000 within docker.
The ssl certificates are created with a local Certificate Authority using mkcert.
mkcert --install
and
mkcert localhost 127.0.0.1 0.0.0.0
To access the local backend we are creating an HttpClient in flutter to pass a SecurityContext. This Security Context gets the .pem file from mkcert like this:
ByteData certs = await rootBundle.load('assets/certificates/fullchain.pem');
securityContext.setTrustedCertificatesBytes(certs.buffer.asUint8List());
A very simplified https request looks like this:
// For Android
const String backendURL = "10.0.2.2";
// For IOS
//const String backendURL = "127.0.0.1";
final endpointPath = "/auth/";
final securityContext = SecurityContext.defaultContext;
ByteData certs = await rootBundle.load('assets/certificates/fullchain.pem');
securityContext.setTrustedCertificatesBytes(certs.buffer.asUint8List());
final client = HttpClient(context: securityContext);
request = await client.getUrl(
Uri.https(
backendURL,
endpointPath,
),
);
final response = await request.close();
if (response != null) {
if (response.statusCode == HttpStatus.ok) {
var responseBodyAsJson =
jsonDecode(await response.transform(utf8.decoder).join());
This works with the IOS Simulator in 100% of all cases. The Android emulator also works with this settings to access a real server hosting our backend with
const String backendURL = "realbackendurl.com";
Our physical devices connecting to the real backend also work with this setting.
But using our local development server in docker only works with IOS Simulator. For Android Emulator with 10.0.2.2 as backend address we get the following error:
HttpException: Connection closed before full header was received
The only response we get in the logs from the nginx container is the following:
worker process 24 exited on signal 4
We cannot just use the simple approach to use import 'package:http/http.dart' as http;
because we cannot access the security context for the certificates.
If you have any questions, please let me know. Any help is welcome!
We changed to every possible backend address and checked with the different settings as described above.
We used different devices and emulators. As described above the error remains for every Android Emulator. If you have any suggestions let us know! Thanks a lot.
Jonas Roßkamp is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.