The resource was blocked due to its Cross-Origin-Resource-Policy header

[saeedesmaili]

I've been using lemonsqueezy.js in my vue app for a few months with:

async loadLemon() {
      if (this.lemonLoaded) return;

      return new Promise((resolve) => {
        const script = document.createElement("script");
        script.src = "https://app.lemonsqueezy.com/js/lemon.js";
        script.defer = true;
        script.onload = () => {
          this.lemonLoaded = true;
          resolve();
        };
        document.body.appendChild(script);
      });
    }

And it's been working fine. My vue app was using vue-cli, and I upgraded to vite and since then I'm getting The resource at “https://app.lemonsqueezy.com/js/lemon.js” was blocked due to its Cross-Origin-Resource-Policy header when trying to load the lemonsqueezy.js script with the above function. Is there anything I can do to fix this?

[brankoconjic]

This problem is because of the Vite setup, not the library.

It seems that you need to configure Vite's CORS settings to allow app.lemonsqueezy.com. You can find more info here: Vite Server CORS. Hope this helps!

[saeedesmaili]

@brankoconjic Thanks for the reply. I tried setting the cors to false and origin: "*" but the issue still exists. Here is the error in Chrome dev tools. Doesn't it mean there is something wrong with the server?

[keyding]

Hi @saeedesmaili

I've created a new project via bun create vue@latest：https://github.com/keyding/lemonsqueezy.js-issue-34

Added the above code, added a button and clicking on the button brings up the checkout page, so far everything looks fine.

<script setup lang="ts">
import { ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
// import TheWelcome from './components/TheWelcome.vue'

const lemonLoaded = ref(false)

async function loadLemon() {
  if (lemonLoaded.value) return;

  return new Promise((resolve) => {
    const script = document.createElement("script");
    script.src = "https://app.lemonsqueezy.com/js/lemon.js";
    script.defer = true;
    script.onload = () => {
      lemonLoaded.value = true
      resolve(true);
    };
    document.body.appendChild(script);
  });
}

loadLemon()
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <!-- <TheWelcome /> -->
    <a class="lemonsqueezy-button" href="https://store.amazonus.app/checkout/custom/ae1d198f-ab92-4ab5-8766-191e88eb3f24?signature=03e6052c15cdd240b0f9f298b83a62f9f94d1ab6d57f322037eb01d6ee07c76c">
        Click To Buy My Product - from Lemon Squeezy
    </a>
  </main>
</template>

Hopefully these will help.