我在学习Directus SDK时遇到了问题——大致如下:
https://docs.directus.io/blog/building-a-personal-travel-journal-with-vue-js-and-directus.html#creating-a-journal-and-users-collection
当我尝试访问数据时,我会得到:
GET http://127.0.0.1:8055/items/calibers 403 (Forbidden)
我可以直接从Chrome访问它,而不是SDK。控制台中错误的详细信息如下:
{
{
"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"
}
}
我认为这可能是一个CORS问题,但我以前在学习中见过,因此我
CORS_ORIGIN: 'true'
在我的docker文件中。
我可以创建登录页面,并按照教程成功登录(这是我唯一可以使用的页面),但我甚至无法使用简单的测试页面提取数据:
<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>
使用本教程中的登录页面成功登录后,我可以直接访问chrome浏览器中的所有数据。我还可以使用相同的用户凭据通过邮递员访问它,因此我必须假设我的用户设置正确(我使用的是默认的管理员用户)。
我的设置有:
"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"
}
我的docker compose文件有:
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: ''
我是新来的,迷失了方向——任何方向都值得赞赏。我甚至不确定在哪里进行故障排除(错误日志等)。谢谢!
编辑:以下是启动后Docker日志中显示的内容,登录后运行此test.vue文件:
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
