fix:[Serving Static Files] flutter web app image can't get show URL Image CORS policy error

[vimp-vpn]

Description

I am running xamp in my local server.i deploy flutter bex app in xamp .also running dart_frog api in same server ,so when i access web app images are not loading dueto CORS policy, imageurl is http://192.168.1.60/image/abc.png

Steps To Reproduce

I am running xamp in my local server.i deploy flutter bex app in xamp .also running dart_frog api in same server ,so when i access web app images are not loading dueto CORS policy, imageurl is http://192.168.1.60/image/abc.png

Expected Behavior

I am running xamp in my local server.i deploy flutter bex app in xamp .also running dart_frog api in same server ,so when i access web app images are not loading dueto CORS policy, imageurl is http://192.168.1.60/image/abc.png

Additional Context

No response

[alestiago]

Hi @vimp-vpn thanks for opening an issue!

The reproductive steps you've provided are not very easy to follow for me; could you provide some minimal step by step instructions? For example here are other issues with videos and detailed reproduction steps: #1044, #961.

[djpnewton]

I found a way to enable cors for the static files. Using the custom static files directory instructions (https://dartfrog.vgv.dev/docs/basics/serving-static-files#using-a-custom-directory-) as a base:

import 'dart:io';

import 'package:dart_frog/dart_frog.dart';
import 'package:shelf/shelf.dart' as shelf;
import 'package:shelf_static/shelf_static.dart' as shelf_static;
import 'package:shelf_cors_headers/shelf_cors_headers.dart' as shelf_cors;

/// Creates a [Handler] that serves static files (with CORS header) within
/// provided [path].
Handler createStaticFileHandlerWithCors({String path = 'public'}) {
  final cors = shelf_cors.corsHeaders(
    headers: {
      shelf_cors.ACCESS_CONTROL_ALLOW_ORIGIN: '*',
    },
  );

  return fromShelfHandler(
    const shelf.Pipeline()
        .addMiddleware(cors)
        .addHandler(shelf_static.createStaticHandler(path)),
  );
}

/// main entry point for the Dart Frog application.
Future<HttpServer> run(Handler handler, InternetAddress ip, int port) {
  final cascade = Cascade().add(createStaticFileHandlerWithCors()).add(handler);
  return serve(cascade.handler, ip, port);
}

@alestiago could be worth adding to docs/docs/advanced/cors.md