3rd party script blocked by CORS

[AloisSeckar]

I am trying to call external script of Termly cookie consent service via Nuxt Scripts.

This is what I have in my nuxt.config.ts:

  scripts: {
    globals: {
      myScript: ['https://app.termly.io/resource-blocker/bbc9f62b-96e1-4064-bea5-e604bb669e55?autoBlock=on', {
        trigger: 'onNuxtReady',
      }],
    },
  },

However, the call gets blocked due to CORS:

When I have script referenced from useHead, it worked with no issues:

useHead({
  script: [{ src: 'https://app.termly.io/resource-blocker/bbc9f62b-96e1-4064-bea5-e604bb669e55?autoBlock=on' }],
})

I am still getting confused with CORS stuff in general. Is there some setting, I need to set up for Nuxt Script module or for Nuxt in general to get this working? Or is it because the target domain refuses my requests due to something I cannot quite affect?

[harlan-zw]

Hi @AloisSeckar

This is due to useScript applying strict privacy defaults, while it works for many third parties, some will block this privacy setting.

You can get around this issue by doing

 scripts: {
    globals: {
      myScript: ['https://app.termly.io/resource-blocker/bbc9f62b-96e1-4064-bea5-e604bb669e55?autoBlock=on', {
        trigger: 'onNuxtReady',
        crossorigin: false,
      }],
    },
  },

You can read more about this behaviour here: https://unhead.unjs.io/usage/composables/use-script#referrerpolicy-and-crossorigin

Let me know if you have any questions or feedback around this 🙂

[AloisSeckar]

Thank you for a quick help, but it doesn't seem to help me. The only difference, that I am getting HTTP Status 200, but still CORS error 🤨

Also my IDE says:

Object literal may only specify known properties, and 'crossorigin' does not exist in type 'NuxtUseScriptOptionsSerializable'.

Isn't the syntax for Nuxt Scripts a little bit different perhaps? Or do I have some wrong version (Nuxt Scripts 0.6.5 and my Nuxt is 3.12.4).

Or it is because how Termly handle requests on their side now?

[AloisSeckar]

What I am still confused about: Does the error talk about header in request to 3rd party site I am sending (I can add it somehow?) or about header comming back from the service (I can modify my app to ignore it?)

[MuhammadM1998]

For anyone stumbling into this like I did, the correct way to do it is to use an object with src and other options as the first argument instead of the script's src string directly

const scripts = {
  globals: {
    myScript: [
      {
        src: 'https://app.termly.io/resource-blocker/bbc9f62b-96e1-4064-bea5-e604bb669e55?autoBlock=on',
        crossorigin: false,
        // ... Regular Script Tag Options
      },
      {
        trigger: 'onNuxtReady',
        // ... Other Nuxt Scripts Options
      },
    ],
  },
}

[harlan-zw]

Going to close this — the crossorigin: false workaround above is the documented escape hatch when a third-party blocks CORS on the script tag. Open a new issue if anything else surfaces 🙏