it seems the `SinglePageAppRoutingHandler` and `Se...

# http4k

[Jippe Holwerda]

it seems the SinglePageAppRoutingHandler and ServerFilters.Cors filter do not play nice together. The CORS OPTION request is being handled by SinglePageAppRoutingHandler. Since it doesn't match a resource, the fallbackHandler is used with a new GET request (without headers). When that request is handled by the Cors filter, the Origin header is missing causing the request to fail...

[Jippe Holwerda]

copying the headers to the fallbackHandler's GET request fixes the issue, but I'm not sure that is the way to go

[s4nchez]

It'd be helpful to have an example to look at, but I'll take a guess here, anyway...

Have you tried making sure the Cors filter executes before the SinglePageAppRouteHandler ?

You can achieve that by casting the SPARH to HttpHandler so the .then function won't execute the filter (in this case Cors) after the routing matching attempt.

Let me see how it goes. If it doesn't help, please provide an example and I'll try to help troubleshooting.

[Jippe Holwerda]

excellent! Casting to HttpHandler and wrapping it in routes worked.

[Jippe Holwerda]

fun router(): (AppContext) -> HttpHandler =
    { context ->
        allRoutesFilter(context).then(
            routes(
                "/auth".let { path ->
                    AuthenticationApi.routes()(context.copy(env = context.env.with(Config.authBasePath of path))).withBasePath(path)
                },

                internalApiFilter(context).then(
                    routes(
                        "/aandachtspunten" bind AandachtspuntenApi.routes()(context),
                        "/beheer" bind BeheerApi.routes()(context),
                        "/stamdata" bind StamdataApi.routes()(context),
                        "/gebruiker" bind GebruikerApi.routes()(context),
                        "/medewerkers" bind MedewerkerApi.routes()(context),
                        "/milieubelastende-activiteiten" bind MilieubelastendeActiviteitApi.routes()(context),
                        "/milieubelastende-activiteit-types" bind MilieubelastendeActiviteitTypeApi.routes()(context),
                        "/overheidsorganisaties" bind OverheidsOrganisatieApi.routes()(context),
                        "/rechtspersonen" bind RechtspersoonApi.routes()(context),
                        "/roles" bind RolesApi.routes()(context),
                        "/kvk" bind KvkApi.routes()(context),
                        "/bag" bind BagApi.routes()(context),
                        "/zaaktype" bind ZaaktypeApi.routes()(context),
                        "/zaken" bind ZaakApi.routes()(context),
                        "/ztc" bind ZtcApi.routes()(context)
                    ).withBasePath("/internal-api")
                ),

                routes(
                    "/config" bind ConfigApi.routes(context.env)
                ).withBasePath("/public-api"),

                "/static" bind static(Classpath("/static"))
                    .withFilter(ResponseFilters.EtagSupport()),

                MockAuthenticateApi.routes(context.env).withBasePath("__authenticate"),

                routes(
                    Method.GET to (singlePageApp(extraFileExtensionToContentTypes = ContentTypes.staticContentTypes)
                        .withFilter(Filters.VueResourceCaching())
                        .withFilter(ResponseFilters.GZip()) as HttpHandler)
                ),
            )
        )
    }

fun allRoutesFilter(context: AppContext): Filter =
    ServerFilters.InitialiseRequestContext(contexts)
        .let {
            requestSlowdownInMs(context.env).let { time -> if (time > 0) it.then(Filters.SlowDownFilter(time)) else it }
        }
        .then(Filters.Cors(context))
        .then(Filters.SecurityHeaders(contentSecurityPolicy(context.env)))
        .then(Filters.UniqueRequestReference())
        .then(Filters.ReportTransactionAndError { event -> events(event) })
        .then(ErrorHandling.CatchAll(context.env))
        .then(storeAuth(context.env, context.httpClient))

fun internalApiFilter(context: AppContext): Filter =
    DebuggingFilters.PrintRequestAndResponse()
        .then(Authentication.authenticated)
        .then(DatabaseFactory.inTransaction(context.jooqConfiguration, context.datasource))
        .then(ErrorHandling.CatchLensFailure(context.env))
        .then(Authorization.storeGebruiker()(context.gebruikerRepository))
        .then(Authorization.storePermissies()(context.gebruikerRepository))
        .then(MedewerkerFilter.storeMedewerker()(context.medewerkerRepository))

[Jippe Holwerda]

routes(
                    Method.GET to (singlePageApp(extraFileExtensionToContentTypes = ContentTypes.staticContentTypes)
                        .withFilter(Filters.VueResourceCaching())
                        .withFilter(ResponseFilters.GZip()) as HttpHandler)
                ),

[s4nchez]

Good to know. That’s one bit of http4k that causes confusion, because different filters may need to be applied at the correct time...

[Jippe Holwerda]

hmm, apparently I was too quick in my conclusion. Although the filter is called at the correct time now, the SinglePageAppRouteHandler itself doesn't work anymore...

[Jippe Holwerda]

I'll see if I can find out why

[Jippe Holwerda]

ok, in <http://Pathmethod.to|Pathmethod.to> the SinglePageAppRouteHandler is wrapped in a TemplateRouter which doesn't match the request spa resource

[s4nchez]

have you tried without the Method.GET to part? you should be able to just combine routinghandlers if my memory serves

[Jippe Holwerda]

yes, but then I'm back to the original problem, where the CORS filter is applied to late

[s4nchez]

Looking at the code above it seems like you need to isolate the cors + singlepage app router (casted to httphandler) into their own "routing group".

[s4nchez]

(i.e. configure cors correctly only for that handler rather than having all filters shared)

[Jippe Holwerda]

how do I put the singlepage app router into a separate routing group? Doesn't that make it a RoutingHttpHandler?

[s4nchez]

True, it does 😞 I'd need a small example to try and see how to work around this issue.

[Jippe Holwerda]

ok, I can make a minimal app to reproduce the behaviour. In what way/format is suitable for you?

[s4nchez]

the simplest way for me would be a self-contained repo. But worst case, some code snippets/gists would help too.

[Jippe Holwerda]

@s4nchez finally had some time to create a repo for the problem: https://github.com/jippeholwerda/http4k-cors-spa

[Jippe Holwerda]

there is a failing testcase

[Jippe Holwerda]

if you comment out the singlePageApp handler, the test passes

[s4nchez]

Brilliant. Thank you 🙂 I'll take a look as soon as I get a chance.

[dave]

We've now released 4.7.0.0 with this change in.

[dave]

np. On further thoughts - do we know of any reason why the SPA would need to respond to options requests? (So to return MethodNotMatched instead of Unmatched...)

[dave]

Meaning you'd get a 200 with the cors headers instead of a 404 when an options request was sent to an SPA route.

[dave]

(am unfamiliar which is why I'm asking)

[Jippe Holwerda]

I think typically you don't want an OPTIONS request to return something other than 405 Not Allowed, since it leaks sensitive information about your server's configuration

[Jippe Holwerda]

so only in the context of REST API's and CORS does it make sense to do anything with OPTIONS

[Jippe Holwerda]

we used to use nginx to serve our static images. If I send it an OPTIONS request, I also get a 405 back

[Jippe Holwerda]

so that might also be acceptable behaviour for the SPA route