Vue3 Code to Post Data to frappe using token based Authentication API

1

Dear Awesome Team,

I am able to run the POST API in postman successfully, and customer gets created in my erpnext live instance as well.

Same I am trying to achieve in my VUEjs3 based application using the below code.

<template>
  <div class="card text-center m-3">
      <div class="card-body">New cust name: {{ product.customer_name }}</div>
      <h5 class="card-header">POST Request with Set Headers</h5>
      <div class="card-body">New cust company type: {{ product.company_type }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const product = ref(null);

// POST request using fetch with set headers
const requestOptions = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'token <apikey>:<apisecret>'
    },
    body: JSON.stringify({ customer_type: 'Company', customer_name: 'ABC' })
};
fetch('https://<liveERPNexturl>.com/api/resource/Customer', requestOptions)
    .then(response => response.json())
    .then(data => product.value = data);
</script>

pls suggest which part of code is failing.

2

I can see that the localhost request to our server hosted erpnext is failing.

Access to fetch at ‘http:///api/resource/Customer’ from origin ‘http://192.168.xx.xxx:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.