我有一個 React 應用程式，可以從 API 訪問資料。
當我對 API 函式中的所有資訊進行硬編碼時，我作業得很好，但是當我嘗試從 .env 檔案中獲取它時，它不起作用。
以下是 API 代碼：
const [data, setDatas] = useState()
let myHeaders = new Headers();
const getDatas = async () => {
myHeaders.append("Access-Control-Request-Headers", process.env.REACT_APP_ACCESS_CONTROL);
myHeaders.append("Authorization", process.env.REACT_APP_BEARER);
const requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
try {
let response = await fetch(
process.env.REACT_APP_DATAS_API, requestOptions);
let result = await response.json();
setDatas(result)
} catch (err) { console.error(err); }
};
console.log(datas && Object.values(datas))
下面是 .env 檔案的樣子：
REACT_APP_PROJECTS_API=https://this-is-the-api-uri
REACT_APP_ACCESS_CONTROL=this-is-the-access-control
REACT_APP_BEARER=Bearer this-is-the-bearer-token
以下是我的 gatsby-config.js 檔案的內容：
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
siteMetadata: {
title: `Site Name`,
siteUrl: `https://www.yourdomain.tld`
},
plugins: ["gatsby-plugin-image", "gatsby-plugin-react-helmet", "gatsby-plugin-sitemap", {
resolve: 'gatsby-plugin-manifest',
options: {
"icon": "src/images/icon.png"
}
}, "gatsby-plugin-mdx", "gatsby-transformer-remark", "gatsby-plugin-sharp", "gatsby-transformer-sharp", {
resolve: 'gatsby-source-filesystem',
options: {
"name": "images",
"path": "./src/images/"
},
__key: "images"
}, {
resolve: 'gatsby-source-filesystem',
options: {
"name": "pages",
"path": "./src/pages/"
},
__key: "pages"
}]
};
為什么它不適用于 .env？
uj5u.com熱心網友回復：
如果您希望您的.env變數可以在 Gatsby 的前端訪問，您需要為這些變數添加GATSBY_前綴前綴
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/495943.html