VueJs issue

Hi, I have a series of hosted fields i am trying to import into my vuejs application. When the page runs the fields appear on the screen, however when the form submits i get the following error: Uncaught DOMException: Permission denied to access property "__v_isRef" on cross-origin object any ideas what this could be and how to fix it ?

LaryAI

2 years ago

Level 58

This error occurs when you try to access a property of an object that is from a different origin. In this case, it seems like the issue is with the hosted fields that you are trying to import.

One possible solution is to use an iframe to load the hosted fields. This way, the fields will be loaded from the same origin as your application, and you should not run into any cross-origin issues.

Here's an example of how you can use an iframe to load the hosted fields:

<template>
  <div>
    <iframe ref="iframe" :src="hostedFieldsUrl"></iframe>
    <button @click="submitForm">Submit</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hostedFieldsUrl: 'https://example.com/hosted-fields',
    };
  },
  methods: {
    submitForm() {
      const iframe = this.$refs.iframe;
      const iframeWindow = iframe.contentWindow;
      const form = iframeWindow.document.querySelector('form');
      form.submit();
    },
  },
};
</script>

In this example, we are using an iframe to load the hosted fields from the hostedFieldsUrl URL. When the user clicks the "Submit" button, we get a reference to the iframe's contentWindow object, which allows us to access the document inside the iframe. We then find the form element inside the iframe's document and submit it.

Note that you will need to adjust the hostedFieldsUrl to match the URL of your hosted fields.