Flutter Web App, CORS blocking image from loading

Question

I'm developing a shopping web app using Flutter, the app gets products data items from an API which I wrote using ASP .Net Core, for product images I'm using xampp to serve image urls instead of using raw images. I fixed the CORS problem in the data API using the following code:

app.UseCors(builder => builder.AllowAnyHeader().AllowAnyMethod().WithOrigins("http://example:port"));

However, I'm still getting the CORS problem when loading the images from within the app here is what I get after inspecting the debug console:

Access to fetch at 'http://example:port/img/OIP.jpg' from origin 'http://example:port' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled

Here is what I've tried so far:

Installed a chrome extension that disables CORS, but didn't work.
Run google chrome with the command:

chrome.exe --user-data-dir="C://chrome-dev-disabled-security" --disable-web-security --disable-site-isolation-trials'

It worked just fine, but this wouldn't be the best solution

Hi @Mohammad Radwan ,Ensure that your XAMPP server is accessible from the Flutter app's environment. This might require adjusting firewall rules or network settings, especially if you are running the Flutter app on a different device or emulator. — Rena
– Rena, Commented Sep 23, 2024 at 9:41

Reza Farjam · Accepted Answer · 2024-09-20 16:16:12Z

Disabling security in Chrome can help during debugging, but it's not a viable solution for production, so I wouldn't recommend it.

In many cases, the issue can be resolved by changing the web renderer to html. You can do this by running your project with the --web-renderer html flag. However, based on my experience, sometimes the opposite is true. Running the project with --web-renderer canvaskit may solve the issue. Therefore, I recommend trying both options.

If you have a specific reason to stick with a renderer that doesn't resolve the issue (for instance, Lottie files require the project to use the canvaskit renderer to function properly), another option is to send the images as Base64 strings from your back-end server. In your Flutter app, you can then decode the Base64 string and convert it back into image bytes using the base64Decode function from the dart:convert library:

import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/material.dart';

// Example of decoding a Base64 string and displaying the image
Uint8List imageBytes = base64Decode('<your-base64-string-here>');
Image.memory(imageBytes);

This approach eliminates the CORS issue, as the image data is sent directly within the response and doesn't require separate network requests to load images.

For more details, you can refer to Flutter's documentation on CORS and web images. You may also find additional solutions and discussions in this StackOverflow post.

Collectives™ on Stack Overflow

Flutter Web App, CORS blocking image from loading

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related