内容与反应预期参数 accessToken 错误答案

【问题标题】：Contentful with react expected parameter accessToken error内容与反应预期参数 accessToken 错误
【发布时间】：2021-06-06 12:21:21
【问题描述】：

我在下面的一个单独项目中创建了一个内容丰富的博客，并希望将我的博客添加到我的主项目中的 blog.js 页面。我在 .env 文件中发送了我的环境变量，我的访问令牌暴露在 github 上，我的 gitignore 文件中从未遇到过这个问题。不确定我是否必须在 Windows 10 中更改设置环境变量。

我还有“dotenv”：“^8.2.0”和“config”：“^3.3.2”，作为我的用户和个人资料的迷你社交网络的依赖项。不确定我是否必须添加 require('dotenv').config();到client.js。

.gitignore file:

.env
node_modules/
config/default.json
.env.development

client.js 文件：

import * as contentful from "contentful";

export const client = contentful.createClient({
  space: process.env.REACT_APP_SPACE_ID,
  accessToken: process.env.REACT_APP_SPACE_TOKEN,
});

.env

REACT_APP_SPACE_ID=my access key 
REACT_APP_SPACE_TOKEN=my access token

控制台错误：

创建客户端

 56 |  */
  57 | function createClient(params) {
  58 |   if (!params.accessToken) {
> 59 |     throw new TypeError('Expected parameter accessToken');
  60 |   }
  61 | 
  62 |   if (!params.space) {

我的 mongoDB 也有一个配置文件，但我不确定这是否设置了我的 Contentful accesstoken

config/db.js

const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');

const connectDB = async () => {
  try{
    await mongoose.connect(db, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
      useCreateIndex: true,
      useFindAndModify: false 
    });

    console.log('MongoDB Connected...');
  } catch(err){
    console.error(err.message);
    // exit process with failure
    process.exit(1);
  }
};
// db.js
module.exports = connectDB;

刚刚添加了我的 .env 文件路径以通过路径使用

server.js

const express = require('express');
const connectDB = require('./config/db');

const app = express();

// Connect Database
connectDB();

// Init Middleware
app.use(express.json({ extended: false }));

app.get('/', (req, res) => res.send('API Running'));

//DEfine Routes
app.use('/api/users', require('./routes/api/users'));
app.use('/api/auth', require('./routes/api/auth'));
app.use('/api/profile', require('./routes/api/profile'));
app.use('/api/posts', require('./routes/api/posts'));

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Server started on port ${PORT}`));
//server.js

【问题讨论】：

您可以使用console.log 注销process.env 以查看令牌是否可用吗？在不了解您的详细设置的情况下很难给出建议。我假设，在脚本开头调用 dotenv 会修复它。
刚刚添加了我的 .env 文件路径以通过路径使用
不确定在哪里放置我的 console.log(process.env.REACT_APP_CLIENT_ID); console.log(process.env.REACT_APP_KEY);
是否需要添加require('dotenv').config();
您可以在要使用它之前放置console.log(process.env.REACT_APP_CLIENT_ID)。如果这个添加记录了undefined，那么你就知道你的环境变量没有被加载。我假设您正在使用 create-react-app，您可以在此处找到有关环境变量的更多信息：create-react-app.dev/docs/…

标签： reactjs environment-variables access-token gitignore contentful

【解决方案1】：

要解决这个问题，您必须在正确的路径中添加环境变量，以便您必须将内容放在 .env.development 中。

.env.development

REACT_APP_SPACE_ID=my access key 
REACT_APP_SPACE_TOKEN=my access token

如果您将 .env.development 放在项目之外，则可能会暴露您的令牌。如果你放置 console.log(process.env);在您要测试的区域。每次测试 console.log 时，请务必通过在终端中放置 npm start 重新启动服务器进行测试。

client\src\client.js

import * as contentful from "contentful";

console.log(process.env);

export const client = contentful.createClient({
  space: process.env.REACT_APP_SPACE_ID,
  accessToken: process.env.REACT_APP_SPACE_TOKEN,
});

如果你把环境变量放在错误的区域，你会收到一个未定义的

Object
FAST_REFRESH: true
NODE_ENV: "development"
PUBLIC_URL: ""
WDS_SOCKET_HOST: undefined
WDS_SOCKET_PATH: undefined
WDS_SOCKET_PORT: undefined
__proto__: Object

如果您在适当的区域测试您的 .env.development 文件，您将看到您的访问密钥和访问令牌将显示在控制台中。

Object
FAST_REFRESH: true
NODE_ENV: "development"
PUBLIC_URL: ""
REACT_APP_SPACE_ID: "my access key"
REACT_APP_SPACE_TOKEN: "my access token"
WDS_SOCKET_HOST: undefined
WDS_SOCKET_PATH: undefined
WDS_SOCKET_PORT: undefined
__proto__: Object

【讨论】：