Problem

Loading assets from an external domain requires suiting CORS headers. We need either implement some proxy or make it easy on the frontend side to take care of CORS headers. E.g. allow origin with some wildcard-pattern like "*.example.com".

(The risk of allow CORS is rather low if it's only about assets, with that an attacker could basically re-use the assets like we do, to render components on a foreign site, but that's about it. The assets content is public anyway and there is no API that we need to allow, just loading assets.)

Comments

fago created an issue. See original summary.

fago’s picture

fago
Primary language German
Location Vienna
commented
Status: Active » Needs work

Thinking about this topic a 2nd time, the CORS route seems to be better. The proxy-setup is rather complicated and might confuse people much more than a few CORS-requests running in the browser.

For nuxt dev mode, I got CORS working immediately.
For nuxt dev mode the following addition to nuxt.config.ts did the trick (replace origin URL with your drupal base-url obviously):

  vite: {
    server: {
      cors: {
        origin: ['http://xb-dev.ddev.site', 'https://xb-dev.ddev.site'],
      },
    },
  },

When running the regular nuxt server, a different configuration is going to be required.
However, a straight-forward configuration as following did not do the trick. Investigating.

nitro: {
    cors: {
      origin: ['http://xb-dev.ddev.site', 'https://xb-dev.ddev.site'],
      methods: ['GET'],
    },
  },
fago’s picture

fago
Primary language German
Location Vienna
commented
Title: Support proxying preview-assets to avoid CORS issues » Avoid CORS issues for preview-assets

Found some working config:

  vite: {
    server: {
      cors: {
        origin: ['http://xb-dev.ddev.site'],
      },
    },
  },
  nitro: {
    routeRules: {
      '/nuxt-component-preview/*.js': {
        cors: true,
        headers: {
          'Access-Control-Allow-Origin': 'http://xb-dev.ddev.site',
          'Access-Control-Allow-Methods': 'GET',
        },
      },
      '/_nuxt/**': {
        cors: true,
        headers: {
          'Access-Control-Allow-Origin': 'http://xb-dev.ddev.site',
          'Access-Control-Allow-Methods': 'GET',
        },
      },
    },
  },

So it seems CORS is really the simpler variant. Let's better clearly document CORS has to be setup correctly + make it easy in our nuxt component-preview helper.

fago’s picture

fago
Primary language German
Location Vienna
commented
Status: Needs work » Fixed

the cors config is actually working fine, so that's the way to go. I documented it as part of https://github.com/drunomics/nuxt-component-preview also.

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.