禁止访问错误：遵循 Directus SDK 教程

Question

我在学习 Directus SDK 时遇到困难 - 大致如下： https://docs.directus.io/blog/building-a-personal-travel-journal-with-vue-js-and-directus.html#creating-期刊和用户集合

当我尝试访问数据时，我得到：

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 问题，但我之前在学习中已经看到过这一点，因此我的 docker 文件中有

CORS_ORIGIN: 'true'

。

我可以按照教程创建登录页面并成功登录（这是我唯一可以工作的页面），但我什至无法使用简单的测试页面提取数据：

<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: ''

我是新来的，迷失了 - 任何方向都值得赞赏。 我什至不确定在哪里进行故障排除（错误日志等）。 谢谢！

Answer 1

好的，我也学到了很多，并且，制作一个文档 我会尽力的