How to fix CORS error for your Flutter web app

How to fix CORS error for your Flutter web app

ยท

4 min read

Hi there ๐Ÿ‘‹ I am Aleksandar and I am building Writings. Simple tool to write, organize and share your content. Hope you enjoy this article.

Building an app to help me build a better writing habit and organize what I write, I came to a problem that was really unfamiliar to me. I simplified the use case so that the whole boilerplate of processes behind building a web app does not block me from doing it. I started by using Flutter Web, as it was the only tech I knew, that I could use to build web apps too. My app is going to be a small text editor with a few buttons here and there so that the user can write something and then share it with their audience.

Really simple. ๐Ÿ‘Œ

And what I meant by boilerplate of processes is getting stuck in a web development-related problem, without previous experience on how to fix it.

One of that situations was when I tried to execute an HTTP request, that I expected to return either 200 or 401 as a response code, but instead, I saw that the request failed with 500 and this showed in the Console:

image.png This is not the actual screenshot of the error I got but the only difference are the URLs. Once I solved the issue I never looked back.

This error is called a CORS error.

And what on Earth is a CORS error?

CORS stands for Cross-Origin Resource Sharing. And as terrifying as it sounds, it's really simple concept. It's a mechanism by which the browser defines which origins from the server can be indicated as place for loading resources. That said, the app hosted on localhost:61045 can make another request that would access a resource on localhost:61045/data.json. The origin is the same, the resource is different. And that might be interpret as a security threat. Why? Because if implemented wrong, a CORS can lead to exposing sensitive information like API keys or other technical details that are important only for the scope of the origin where the app runs. More-over, a CORS error would prevent a PEBKAC to harm itself. In the similar context, letting a child cut bread would be a bad idea.

So most of the modern Web Browsers would scream when they recognize a poorly setup CORS configuration. Your requests will fail, and when you go to the Console you will see something like that screenshot above, or:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite".

How to turn it off? ๐Ÿ˜ฑ

There are few ways. If you ask a web dev they will tell you to install an extension for Chrome or Firefox. Unfortunately that didn't work for me, because there is a hidden gem here that has to do with caching. And I never managed to invalidate my caches so the extensions never worked. I tried this and this extension.

How about for Flutter?

Now if you are a mobile developer that for some reason had jumped into doing Flutter web app, just like myself, I imagine your face be like this at that point:

whaaa

And that is ok because the web development problems are a tiny bit different than what we have for mobile (or whatever nonweb world you are coming from).

Running a web app in Flutter

Working on a Flutter web app, I bet you noticed that on each run for the app you are dedicated the very same localhost as url with a different port as target. All of that comes from a configuration file called chrome.dart that lives somewhere in your Flutter SDK installation. Or:

$FLUTTER_SDK/packages/flutter_tools/lib/src/web/chrome.dart

If you open this file you'll see a familiar Dart code, that takes care of running this browser instance the moment you press Run in your IDE or do flutter run -d chrome. So you can play with it.

We want to turn CORS checks off by disabling all web security checks. That will make your browser warn you in different ways but it's ok as this instance of Chrome will not be your main one and should definitely not be the one where you will do your production testing.

Find the line that defines the args with which the Chrome instance will be run. Or search for an existing argument called --no-default-browser-check. Right after that (without importance of priority), add --disable-web-security. My args line looks like this:

image.png

There is a catch here also. A second step. Right after saving the chrome.dart file, go to your Flutter installation folder, and there in bin should be a file called flutter_sdk.stamp. What this file is I don't know in detail. I imagine is a caching that the SDK creates so that it serves the dependency resolving mechanisms that demand locations, paths, plugins or libraries. But this is assumption, don't trust it fully. Now remove that file. It will get recreated, with the new configuration for the chrome.dart in consideration (otherwise, it'll be an older stamp).

Just in case, restart your IDE and start the web app again. You should see something like this: image.png

And the CORS error should be farewell.

Hope this helps.

cover photo by Markus Spiske on Unsplash

ย