You want to call your services from a web browser, but the browser blocks the request because of the same-origin policy (because the webpage is exposed on a different domain or port compared to your APIs).
The problem can be solved by using existing CORS support in http4s server.
The only difference in the library would be to use buildRoutes method,
exposing routes that can be further manipulated, instead of build method.
The following example demonstrates how to add CORS support:
```scala 3 val httpServer: Resource[IO, org.http4s.server.Server] = { import com.comcast.ip4s.* import org.http4s.server.middleware.*
for
routes <- ConnectHttp4sRouteBuilder
.forServicesIO
// Using buildRoutes method instead of build
.buildRoutes
app = CORS.policy
// Configure allowed origins
.withAllowOriginHost(_.host.value == "localhost")
.apply(routes.all)
.orNotFound
server <- EmberServerBuilder.default[IO]
.withHost(host"0.0.0.0")
.withPort(port"0")
.withHttpApp(app)
.build yield server }
// Start the server httpServer.useForever.unsafeRunSync() ```
In any case, it is better to expose your APIs on the same domain as your webpage, if possible. CORS is always an additional request; separate domain or subdomain will also add additional DNS lookup time, both of which can be avoided.