[SOLVED] Flutter Web CORS Error

You must have faced a CORS Policy error in Flutter web app (as mentioned below) when fetching data from a Rest API or using a NetworkImage URL.

Access to XMLHttpRequest at 'https://navoki.com/wp-content/uploads/2019/09/200_40.png' from origin 'http://localhost:9090' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Quick Solution for CORS Policy Error

These are temporary solutions, enable it after use for security reasons.

1. Solution for Windows

Run this command in you terminal

 chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

2. Solution for macOS

Run this command in you terminal

 open /Applications/Google\ Chrome.app --args --user-data-dir="/var/tmp/Chrome dev session" --disable-web-security

Adding CORS (Cross-Origin Resource Sharing) header

When you use your server like Firebase, AWS, or Google Cloud, make changes in your server script. You need to add the following CORS (Cross-Origin Resource Sharing) header as the header in your API code. This header means if the request is from Origin mentioned in the header, then handle the request.

The solution is divided in 2 parts

1. CORS preflight issue in Network Image
2. CORS policy issue when using Rest API

The CORS policy solution is recommended for development only.

1. CORS policy issue when fetching Rest API

The CORS error, solution is available in 2 ways, whichever works for you

a. Accept request in CORS from Your Server (Recommended)

On Server side, Here is an example of Node.js code, you can do similar on other server scripts.

// This will accept request from this domain only
headers.append('Access-Control-Allow-Origin', 'navoki.com'); // Replace your domain
headers.append('Access-Control-Allow-Methods', 'GET, DELETE, HEAD, OPTIONS');

On Client(App) side, Here is an example of Dart HTTP request to above server. This client by any web app made is Flutter Web, React.js etc

// This will accept request from 
headers.append('Origin', 'navoki.com'); // Replace your server domain

b. Accept request in CORS from anywhere (Dev only)

To temporarily allow any Origin can request from your server. Use this in your development environment only set CORS header as

// This will accept request from this domain only
headers.append('Access-Control-Allow-Origin', '*'); // Replace your domain

// This will accept request from this domain only
headers.append('Access-Control-Allow-Credentials', 'true');

c. Using 3rd party CORS proxy (Not Recommended)

PLEASE DO NOT USE THE PROXY ON A PRODUCTION SITE

A CORS proxy is a service that allows developers temporarily to access API or Images from other websites, without having to own that website and bypass Flutter Web CORS error.

This CORS proxy solution is only for students or developers learning networking topics in their programming language. When the Flutter web app sends a request to this 3rd party, it adds the necessary CORS header and returns the original server response to the Flutter web app. You can use any of these proxies

1. https://corsproxy.github.io/
2. https://cros-anywhere.herokuapp.com/

Don’t send sensitive information through the proxy

On Flutter Web side, Append the your server URL to CORS Proxy URL. An example of HTTP request to a server.

Syntax: <proxy-url>/<your-server-url>

var url = Uri.parse("https://corsproxy.github.io/https://example.com/someapi");
var response = await http.get(url);

2. CORS preflight issue in Network Image

You must have tried Image.network() or NetworkImage() widgets on Flutter web app. If the Image url accepts any request as mentioned here then image will be downloaded and shown in web app. But if you are receiving Flutter web CORS issue like below

Access to XMLHttpRequest at 'https://navoki.com/wp-content/uploads/2019/09/200_40.png' from origin 'http://localhost:9090'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The solution is divided in 2 ways, whichever works for you

1. Using Alternative Flutter widgets to avoid CORS error
2. Public Image from your server, using CORS header
3. Public Image from other server, using CORS Proxy

a. Using Alternative Flutter widgets to avoid CORS error

Alternative Flutter widgets will not create Flutter Web Cors error, for this you may need to changes some codes. Instead of using Image.network() or NetworkImage() flutter widgets, you can use other Flutter widget available following flutter widgets

1. ImageElement available in 'dart:html'
2. Image.memory pass image as encoded base64 string

Download Source code and try yourself.

b. Public Image from Own Server, using CORS header

Use this in your server to make your images publicly available and fetched

// This will accept request from this domain only
headers.append('Access-Control-Allow-Origin', '*'); // Replace your domain

c. Public Image from Other Server, using CORS Proxy

Use this development mode for testing and learning purpose only. Use URL as mentioned

Syntax:<proxy-url>/<image-url>

Image(
     image: NetworkImage(
     'https://cros-anywhere.herokuapp.com/https://navoki.com/wp-content/uploads/2019/09/200_40.png',
       ),
     ),

Important points to remember

Use Flutter Web CORS Proxy in development only. Never use it in production because some other server will read your requests and data.

NOTE: At Client, the IP or domain in Origin and Request Client IP or domain should match. If you are testing from localhost then IP and PORT should be same. Example if you are running server on localhost

// This will accept request from this localhost only
headers.append('Access-Control-Allow-Origin', '127.0.0.1:5000'); // Localhost

Default Methods supported in CORS header are GET and POST

If need support of PUT, DELETE, OPTIONS Methods in API request are needed, add this extra header on Server

// This will accept these methods only
headers.append('Access-Control-Resuest-Method', 'GET, POST, PUT, OPTIONS'); 

To know more about CORS click here

Stuck in Flutter ?

Ask us your Flutter questions in Chat Box

Follow us on LinkedIn and Discord , Instagram