如何解决访问 DatoCMS 的 Apollo 错误 401

Posted 2023-03-10

【中文标题】如何解决访问 DatoCMS 的 Apollo 错误 401

【英文标题】：How to resolve Apollo error 401 accessing DatoCMS

【发布时间】：2019-05-12 16:58:18

【问题描述】：

我遵循了这个指南：

https://medium.com/@marcmintel/quickly-develop-static-websites-with-vuejs-a-headless-cms-and-graphql-bf64e75910d6

但是当我运行 npm run dev 时，我的 localhost:3000 上出现错误 401

这是我的 nuxt.config.js

module.exports = 
  /*
  ** Headers of the page
  */
  head: 
    title: 'hello-world',
    meta: [
       charset: 'utf-8' ,
       name: 'viewport', content: 'width=device-width, initial-scale=1' ,
       hid: 'description', name: 'description', content: 'Nuxt.js project' 
    ],
    link: [
       rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' 
    ]
  ,
  /*
  ** Customize the progress bar color
  */
  loading:  color: '#3B8070' ,
  /*
  ** Build configuration
  */
  build: 
    /*
    ** Run ESLint on save
    */
    extend (config,  isDev, isClient ) 
      if (isDev && isClient) 
        config.module.rules.push(
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        )
      
    
  ,
  modules: [
    '@nuxtjs/apollo',
  ],
  apollo: 
    clientConfigs: 
      default: 
        httpEndpoint: 'https://graphql.datocms.com',
        getAuth: () => 'Bearer XXXXXXXXXXXXX' //my apikey
      
    
  

这是执行查询的 vue 文件。我目前在页面中没有显示任何内容，但我仍然收到错误消息。

<template>
    <div>
        All blog posts

    </div>
</template>

<script>
import gql from 'graphql-tag'

export default 
    apollo: 
        allPosts: gql`
            allPosts
                title,
                text,
                slug
            
        `
    

</script>

在 DatoCMS 中正确定义了 post 数据类型，我使用 API Explorer 对其进行了测试

【参考方案1】：

在文章的 cmets 中找到了解决方案。 您需要将您的身份验证放在一个单独的文件中，如下所示：

~/apollo/config.js
export default function(context)
 return 
   httpEndpoint: ‘https://graphql.datocms.com',
   getAuth:() => ‘my-token’ //Bearer is added by default
 
        

然后在 nuxt.config.js 阿波罗：

apollo: 
  clientConfigs: 
    default: ‘~/apollo/config.js’