[FEATURE] add api gateway to prevent CORS preflight requests

[niklaswolf]

Description

If the API lives under a different domain than the SPA (which is the case for a majority of the projects I believe), a preflight request is made before every api-request because of CORS. This hurts the performance quite bad, because of course the real request has to wait for the preflight request to be finished. A solution would be to have an API-gateway using Nuxt's serverMiddleware feature. This would live under the same domain like the SPA and serve as a proxy to the shopware backend API. Like this there wouldn't be any CORS at all and essentially half the requests would be made. Another bonus would be a reduced load on the shopware api, as it would receive more or less half of the requests.

Interesting read on this topic: https://www.freecodecamp.org/news/the-terrible-performance-cost-of-cors-api-on-the-single-page-application-spa-6fcf71e50147/

There also are some implications to the service worker caching, as some requests to the API are GET-requests that would then be served from the same domain, so the service worker would cache those API routes (e.g. /store-api/cart), which is in most cases not wanted.

[meeshoogendoorn]

I have a few questions about this topic.

I understand the pros of using a proxy instead of preflight requests. Is it not better to setup a custom proxy server in nginx or does this also have some complications?

My shopware 6 and PWA instance is running on a nginx server. Lets say i would create a proxy server configuration in nginx listening on port 8080.

Then i could do my requests to domain.nl:8080 right or does this have no pro's agains creating proxy with server middleware in nodejs?

This does of course require extra configurations on the server which should be documented but shopware-pwa doesn't need any additional changes.

[meeshoogendoorn]

location /some/path/ {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_pass https://SHOPWARE_ENDPOINT;
    proxy_set_header Origin your-pwa-host.com;
}

[meeshoogendoorn]

See the following post: https://podrezo.medium.com/using-a-reverse-proxy-with-your-web-application-5eec92001193

[niklaswolf]

@meeshoogendoorn of course you can do it like you described, should be perfectly fine 😊 The benefit I see in doing it inside nuxt is that you do not have to fiddle with the webserver config and it would be essentially plug'n play. Both solutions have their cons and pros and should be evaluated for the project. I also don't see any reason why not both solutions could be described in the docs, so no real changes have to be done to the PWA itself. 😊

[meeshoogendoorn]

@niklaswolf Yes agree, maybe for shopware-pwa users it's better to make it plug'n play because most people are not configuring their servers themselves i think. I think the biggest advantage of using nginx is that u could integrate it with load balancing. so your proxy will be the load balancer.

But i agree that plug'n play solution would be best.