New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FEATURE] add api gateway to prevent CORS preflight requests #1602
Comments
I have a few questions about this topic. I understand the pros of using a proxy instead of preflight requests. 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. |
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;
} |
See the following post: https://podrezo.medium.com/using-a-reverse-proxy-with-your-web-application-5eec92001193 |
@meeshoogendoorn of course you can do it like you described, should be perfectly fine 😊 |
@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. |
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.
The text was updated successfully, but these errors were encountered: