[FEATURE] add proxy to prevent preflight CORS requests for API on client side

[niklaswolf]

related shopware-pwa issue: vuestorefront/shopware-pwa#1602

I won't describe the whole issue here again, as everything described in the linked issue is basically still the case :)

I think this is a feature that would benefit many projects/developers and it could also be optional/configurable.
Basically what I'd like to see:

• be able to define a proxy route that points to the Shopware endpoint, e.g.

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

• be able to set the endpoint of the apiInstance to something other on the client side, e.g. location.origin.

Like this every API-request would origin from the same domain and therefore there wouldn't be any CORS issues :)

[patzick]

Thanks, we'll take a look into this!
Could you scale from 1-5 how important is this for you? :)

[niklaswolf]

I think this is quite important, as this would be a real nice performance improvement (no blocking preflight requests at all on client side). So I would rate it a 3 (1 being the highest importance), only because one can achieve this on their own.
But I think it would be nice to provide such functionality out of the box, because many projects (of course only if the API lives on another (sub-)domain than the frontend) would benefit from it.

Maybe it's also sufficient to only document a solution to this right now, I can provide how we did it in our shopware-pwa projects which should basically work on shopware-frontends, too :)

[meeshoogendoorn]

I have a created a simple nuxt3 module based on nuxt-proxy and http-proxy-middleware.

shopware frontends proxy

We used this in our POC for shopware frontends.

[niklaswolf]

@meeshoogendoorn great to see you here :)
I think that's essentially it, but I have a question: I don't see on first glance where the API-client get it's new base-url from... Can you maybe explain that? :)

[meeshoogendoorn]

@niklaswolf of course 👍

export default defineNuxtConfig({
    shopware: {
        shopwareEndpoint: 'https://some-shopware-6-instance.com',
        shopwareAccessToken: 'ACCESSTOKEN',
    }
});

the above configuration is the default way to configure shopware/frontends according to the documentation. I created a module which extended the shopware configuration object in nuxt.config.js by adding two options: proxyDestinationEndpoint and proxy.

The shopwareEndpoint needs to be set to the proxy base URL, and the proxyDestinationEndpoint needs to be set to your Shopware 6 instance URL.

This way, shopware/frontends module does not need any extra configuration, as it will create an instance based on the shopwareEndpoint and the proxy module will extend this and create a proxy.

So, if we take the example above, the following configurations will be with proxy, in this example i assume you run the shopware/frontends app on localhost:3000:

export default defineNuxtConfig({
  shopware: {
    shopwareEndpoint: 'http://localhost:3000',
    proxyDestinationEndpoint: 'https://some-shopware-6-instance.com',
    shopwareAccessToken: 'SWSCWTKXULEZNGRKSDBLSG1IDQ',
    proxy: true,
})

[niklaswolf]

@meeshoogendoorn thanks, now I understand it :)

[meeshoogendoorn]

I accidentally removed the shopware-frontends-proxy npm package today. 😢
I will republish tomorrow because I have to wait 24 hours to republish. 😄

[BrocksiNet]

@niklaswolf and @meeshoogendoorn can we close this issue or is there something left? 🤔

[meeshoogendoorn]

@BrocksiNet Yes, this issue can be closed. See the Community Modules Section in the documentation:

Community Modules Section in Docs