我首先要说我遵循这里How do I hide API key in create-react-app?的所有建议,但没有一个起作用。我已经搜索了一个多小时,试图找到答案,但一无所获。以下是我的解释。
create-react-app
来支撑我的项目.env
文件REACT_APP_GOOGLE_MAPS_API_KEY = api key
Map.js
中添加了const GM_API_KEY =
${process.env.REACT_APP_GOOGLE_MAPS_API_KEY};
(刻度线在文件中此变量的周围,但不会在此处显示)"https://maps.googleapis.com/maps/api/js?key=GM_API_KEY&callback=initMap"
Map.js
文件的顶部,我添加了一个console.log(GM_API_KEY);
以确保其正常工作。App.js
页面加载后,我的密钥在控制台中输出,但是我仍然收到Google的错误消息,说我的API密钥无效。另外,如果我在页面加载后手动console.log(GM_API_KEY)
,则会收到参考错误,指出GM_API_KEY is undefined
如果有人有任何建议或可以提供任何帮助,我将不胜感激!感谢您抽出宝贵时间来检查我的问题。
答案 0 :(得分:5)
我对敏感数据的处理甚至没有将它们保存在.env
中,我在项目根目录下打开终端并运行export API_KEY=sdf54vvetvf...
,然后在您的应用程序内,您可以通过{{1 }} note ,每次从该会话中关闭终端时,都需要手动添加
答案 1 :(得分:3)
尝试定义将api键保存在生命周期挂钩中的常量,例如componentWillMount(尽管此方法现在不安全),以确保在挂载组件时变量可用:
Error.stackTraceLimit = Infinity;
require('core-js/es6');
require('core-js/es7/reflect');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
var appContext = require.context('../src', true, /\.spec\.ts/);
appContext.keys().forEach(appContext);
var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');
testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
然后
componentWillMount() {
const GM_API_KEY = ${process.env.REACT_APP_GOOGLE_MAPS_API_KEY};
}