未捕获的错误：配置必须包含`projectId`（使用环境变量时）

Question

1. 只有在 sanityClient 中为 projectId 使用环境变量时，即使在 .env 文件中也找不到它

• 我的目标是在 reactjs 中将后端数据从 Sanity 连接到我的前端。

• 希望看到在 sanity.io(Like this) 上发布的内容，但却得到了一个空白页面。

在终端中一切都成功且呈绿色，但是在检查空白页面时会弹出此错误

config.js:42 Uncaught Error: Configuration must contain `projectId`
    at exports.initConfig (config.js:42:1)
    at SanityClient.config (sanityClient.js:85:1)
    at new SanityClient (sanityClient.js:53:1)
    at SanityClient (sanityClient.js:50:1)
    at Module../src/client.js (client.js:4:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/container/About/About.jsx (index.js:1:1)
    at Module.options.factory (react refresh:6:1)

1. 当我对 projectId 进行硬编码但对安全性而言不是一个好主意时可以使用

   projectId: '我的projectID'

• 试图通过sanity env documentation 了解并解决它，但没有结果。也可能是因为我在使用 client.js 而他们使用 sanity.json 将后端连接到前端。
• 尝试像这样编写代码 ${process.env.REACT_APP_SANITY_PROJECT_ID} 像导航栏和 inages 这样的组件来代替空白页，但不是来自理智的数据/内容

得到了这个错误

Access to XMLHttpRequest at 'https://undefined.apicdn.sanity.io/v2022-02-01/data/query/production?query=*%5B_type%20%3D%3D%20%22abouts%22%5D' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

• 还尝试更改 .env 文件的目录，但没有结果

1. 这是 client.js 中的代码

import sanityClient from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';

export const client = sanityClient({
  projectId: process.env.REACT_APP_SANITY_PROJECT_ID,
  dataset: 'production',
  apiVersion: '2022-02-01',
  useCdn: true,
  token: process.env.REACT_APP_SANITY_TOKEN,
});

const builder = imageUrlBuilder(client);

export const urlFor = source => builder.image(source);

和 About.jsx

import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';

import { images } from '../../constants';
import './About.scss';
import { urlFor, client } from '../../client';
const About = () => {
  const [abouts, setAbouts] = useState([]);

  useEffect(() => {
    const query = '*[_type == "abouts"]';
    client.fetch(query).then(data => setAbouts(data));
  }, []);
  return (
    <>
      <h2 className="head-text">
        I know that <span> Good Design </span> <br /> means{' '}
        <span> Good Business</span>
      </h2>
      <div className="app__profiles">
        {abouts.map((about, index) => (
          <motion.div
            key={about.title + index}
            whileInView={{ opacity: 1 }}
            whileHover={{ scale: 1.1 }}
            transition={{ duration: 0.5, type: 'tween' }}
            className="app__profiles-items"
          >
            <img src={urlFor(about.imgUrl)} alt={about.title} />
            <h2 className="bold-text" style={{ marginTop: 20 }}>
              {about.title}
            </h2>
            <p className="p-text" style={{ marginTop: 10 }}>
              {about.description}
            </p>
          </motion.div>
        ))}
      </div>
    </>
  );
};

export default About;

Answer 1

• CORS 错误

将 cors 策略添加到您提出请求的端口的健全项目中。转到您的项目，单击 API 选项卡并添加正确的域和端口并允许凭据并保存：

• projectId 错误

确保 env 设置正确。

console.log("check token", process.env.REACT_APP_SANITY_PROJECT_ID)

如果 env 打印出来，请确保您通过了正确的。如果这不是问题，我们还在“/studio”内的sanity.json 中使用projectId。

"api": {
    "projectId": "ProjectIdHere",
    "dataset": "production"
  },

Answer 2

我注意到您的 Access to XMLHttpRequest 错误中有一个 CORS 错误。

您很可能必须在您的 sanity API 中设置一个 API 令牌。

1. 登录 Sanity.io
2. 转到您的项目
3. 转到 API/Cors Orgin 并为您的 url 设置访问权限（通常为 http://localhost:3333）

Answer 3

这可能有不同的原因。

健全的 CORS 定义

• 您必须在令牌定义中选择编辑器
• 或者你把.env.example而不是.env文件放在你的React应用中

Answer 4

我遇到了同样的问题，也许你的 .env 不在你的根文件夹中，就像它不在我的文件夹中一样，它位于 src 文件夹中，一旦我移动到根文件夹有效。希望这会有所帮助