403 Forbidden Error upon trying to access Frappe JSON data in Vue App

1

Inside the vue app, i am using this method to call the data

const response = await fetch(
‘http://hdfc.localhost:8000/api/method/hdfc.hooks.test’,
{ headers: { ‘Access-Control-Allow-Origin’: true } }
)
// const data = await response.json()
console.log(response)

Using this in the Vue App to access a White-listed custom function in Hooks.py that returns the JSON data, It even works on localhost on the browser.

@frappe.whitelist()
def test():
return frappe.get_meta(“Test For Actions”)

But while fetching it within the Vue app, it shows 403 Forbidden Error…
Is there any way to fix this, currently my Vue app is stored inside the frappe custom app…

2

@buildwithhussain @netchampfaris can you please give some insight?

3

Hi,

Don’t you have to use user API key, where role give access to your moduleDef and doctype in the call, like explain in the doc ?

https://frappeframework.com/docs/user/en/api/rest

4

Figured it out, it was resolved by the following:

const clickFunction = async () => {
// const response = await import(
// ../../../hdfc/hdfc/doctype/individual_doc_test/${path}
// )
const response = await fetch(
http://localhost:8000/api/method/hdfc.hooks.test,
{
headers: { ‘Access-Control-Allow-Origin’: true },
method: ‘GET’,
credentials: ‘include’,