I'm having trouble learning Directus SDK - loosely following: https://docs.directus.io/blog/building-a-personal-travel-journal-with-vue-js-and-directus.html#creating-a-journal-and-users-collection
When I try to access data, I'm getting:
GET http://127.0.0.1:8055/items/calibers 403 (Forbidden)
I can access this from Chrome directly, just not the SDK. The details of the error in the console are:
{
{
"message": "You don't have permission to access collection \"calibers\" or it does not exist. Queried in root.",
"extensions": {
"reason": "You don't have permission to access collection \"calibers\" or it does not exist. Queried in root.",
"code": "FORBIDDEN"
}
}
],
"response": {
...
status: 403
statusText: "Forbidden"
type: "cors"
url: "http://127.0.0.1:8055/items/calibers"
}
}
I thought it may be a CORS issue, but I've seen that before in my learning and because of that I have CORS_ORIGIN: 'true' in my docker file.
I can create the login page okay and login successfully following the tutorial (it's the only page I can get working), but I can't even pull data using a simple test page:
<script setup>
import { ref, onMounted } from 'vue'
import { createDirectus, rest, readItems } from '@directus/sdk'
// Client with REST support
const client = createDirectus('http://127.0.0.1:8055/').with(rest())
const retval = ref([])
onMounted(async () => {
try {
const response = await client.request(readItems('calibers'))
console.log('Full response:', response)
retval.value = response
console.log('success value read:', retval.value)
} catch (error) {
console.error('Error fetching:', error)
}
})
</script>
<template>
<div v-for="val in retval" :key="val.id">
<div>{{ val }}</div>
</div>
</template>
After logging in successfully using the login page from this tutorial, I can access all of the data in my chrome browser directly. I can also access it with postman using the same user credentials, so I have to assume that my user is setup correctly (I'm using the default admin user).
My setup has:
"dependencies": {
"@directus/sdk": "^17.0.0",
"pinia": "^2.1.7",
"vue": "^3.4.29",
"vue-router": "^4.3.3"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.8.0",
"@tsconfig/node20": "^20.1.4",
"@types/jsdom": "^21.1.7",
"@types/node": "^20.14.5",
"@vitejs/plugin-vue": "^5.0.5",
"@vue/eslint-config-prettier": "^9.0.0",
"@vue/eslint-config-typescript": "^13.0.0",
"@vue/test-utils": "^2.4.6",
"@vue/tsconfig": "^0.5.1",
"autoprefixer": "^10.4.20",
"eslint": "^8.57.0",
"eslint-plugin-vue": "^9.23.0",
"jsdom": "^24.1.0",
"npm-run-all2": "^6.2.0",
"postcss": "^8.4.41",
"prettier": "^3.2.5",
"tailwindcss": "^3.4.10",
"typescript": "~5.4.0",
"vite": "^5.3.1",
"vitest": "^1.6.0",
"vue-tsc": "^2.0.21"
}
And, my docker compose file has:
environment:
DB_CLIENT: 'sqlite3'
DB_FILENAME: '/directus/database/data.db'
KEY: 'xxxxx'
SECRET: 'xxxxx'
ADMIN_EMAIL: 'xxxxx'
ADMIN_PASSWORD: 'xxxxx'
CACHE_ENABLED: 'false'
CACHE_STORE: 'redis'
REDIS: 'redis://cache:6379'
CORS_ENABLED: 'true'
CORS_ORIGIN: 'true'
CORS_METHODS: 'GET,POST,PATCH,DELETE'
CORS_CREDENTIALS: 'true'
REFRESH_TOKEN_COOKIE_DOMAIN: 'localhost'
EXTENSIONS_AUTO_RELOAD: 'true'
WEBSOCKETS_ENABLED: 'true'
IMPORT_IP_DENY_LIST: ''
I'm new and lost - any direction is appreciated. I'm not even sure where to troubleshoot (error logs, etc.). Thanks!
Edit: here is what is showing in the Docker logs after doing a startup, login then running this test.vue file:
2024-08-23 21:31:03 [04:31:02.426] INFO: Initializing bootstrap...
2024-08-23 21:31:03 [04:31:02.430] INFO: Database already initialized, skipping install
2024-08-23 21:31:03 [04:31:02.430] INFO: Running migrations...
2024-08-23 21:31:03 [04:31:02.442] INFO: Done
2024-08-23 21:31:03 2024-08-24T04:31:03: PM2 log: Launching in no daemon mode
2024-08-23 21:31:03 2024-08-24T04:31:03: PM2 log: App [directus:0] starting in -cluster mode-
2024-08-23 21:31:06 2024-08-24T04:31:06: PM2 log: App [directus:0] online
2024-08-23 21:31:08 [04:31:07.574] WARN: "PUBLIC_URL" should be a full URL
2024-08-23 21:31:08 [04:31:07.578] WARN: Spatialite isn't installed. Geometry type support will be limited.
2024-08-23 21:31:08 [04:31:07.585] INFO: Watching extensions for changes...
2024-08-23 21:31:08 [04:31:07.638] INFO: GraphQL Subscriptions started at ws://undefined/graphql
2024-08-23 21:31:08 [04:31:07.639] INFO: WebSocket Server started at ws://undefined/websocket
2024-08-23 21:31:08 [04:31:07.656] INFO: Server started at http://0.0.0.0:8055
2024-08-23 21:31:33 [04:31:33] POST /auth/login 200 529ms
2024-08-23 21:31:43 [04:31:43] OPTIONS /items/calibers 204 2ms
2024-08-23 21:31:43 [04:31:43] GET /items/calibers 403 30ms
issue alredy resolved in the comment section
issue of collection not being accessible was caused due to not assigning the Public role with CRUD access to the collection as describe in this tutorial blog