API-Proxy to prevent CORS-issues

[niklaswolf]

I already created an issue for this, but I talked with @mkucmus a bit on this and we decided to first have an open discussion about this.

Short summary:
If the Shopware-API lives under a different (sub)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.

My proposed solution:
Add a nuxt serverMiddleware with a proxy for the shopware-api (in fact there is a dedicated module for this kind of feature @nuxtjs/proxy).
This would add a new server-side route, that can be configured freely, let's say /store-api. The configuration would look like this:

  proxy: {
    "/store-api": process.env.SHOPWARE_ENDPOINT,
  },

This would proxy all requests to /store-api to the shopware API, with the big difference that there wouldn't be any CORS anymore, as the requested endpoint lives under the same domain as the application itself.

Benefits

• no CORS at all --> no preflight requests --> essentially half the requests would be made
• Bonus: reduced load on the shopware api, as it would receive more or less half of the requests.

Drawbacks

• increased load on the node server
• increased overall complexity

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

[meeshoogendoorn]

I have used this in another SPA project using Nuxt and It works pretty well. I think it would be a good practice to make this optional if this is possible. Because of the complexity and for users just starting with Shopware-PWA. I think the bigger projects could experience a lot of benefit from this way of preventing CORS. Did u already did some tests to see the results of response time and load on node server?

[niklaswolf]

I have this configured on a project that is in development right now and up until now we see no problems, but there is of course also no real traffic on the site right now.
What I see is that we save ~100ms for the CORS preflight requests (on every request of course), which can be quite significant, especially on first page load.
What we have to measure of course is what the overhead added from the proxy is, so that we can see the real improvement.
But even if there is none, this would decrease the requests that the shopware api has to handle to essentially half, which by itself is a good thing I'd argue :)

[meeshoogendoorn]

Yeah that's true 👍

[awais019]

Hey guys, I have a similar issue. We are using two different domains for the backend and frontend. How can I resolve cors issue.