无法从Java应用程序访问Heroku配置变量中的API密钥-前端问题

Unable to access API key in Heroku Config Vars from Javascript app(无法从Java应用程序访问Heroku配置变量中的API密钥)

本文介绍了无法从Java应用程序访问Heroku配置变量中的API密钥的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试将一个由Html、css和Javascript文件组成的简单静电应用程序部署到Heroku。我还添加了&dumy"；composer.json和index.php文件，以允许静电文件驻留在Heroku中。当我转到托管页面时，我看到一个空白屏幕。控制台窗口如下所示。这些文件链接到我的GitHub存储库，所以我使用.gitignore文件来排除我的API密钥，并将API密钥保存在Heroku的Config Vars中。应用程序未找到API密钥并引发错误。

Uncaught ReferenceError: MAPBOX_KEY is not defined                 logic.js:68
    at createMap (logic.js:68)
    at createFeatures (logic.js:56)
    at logic.js:9
    at d3.min.js:3
    at Object.<anonymous> (d3.min.js:7)
    at d.call (d3.min.js:4)
    at XMLHttpRequest.e (d3.min.js:7)

到目前为止，我已经尝试了以下方法：

直接在Heroku的设置/配置变量下添加API密钥
使用控制台窗口添加密钥Heroku配置：add mapbox_key=pk.eyJ1I.
已禁用网页缓存
在网页上运行空缓存和硬重新加载

在控制台中运行Heroku配置，收到以下错误：

heroku config
»   Error: Missing required flag:
»     -a, --app APP  app to run command against
»   See more help with --help

我搜索了文档和堆栈溢出，在Heroku中找不到任何有关使用Javascript的API密钥的信息。我是否需要在我的.js或.html文件中添加额外的代码，以便应用程序在Heroku服务器上找到密钥？下面是错误行的一部分.js代码。

// +++++ Leaflet Challenge +++++

// store API endpoint inside queryUrl
var queryUrl = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";

// make API call to USGS and perform a GET request to the query URL
d3.json(queryUrl, function(data) {
   // after a response, send the data.features object to the createFeatures function
   createFeatures(data.features);
});

// Circle radius function
function circleSize(magnitude) {
   return magnitude **2 * 2000 
};

// Circle color function by depth
function circleColor(depth) {
   switch (true) {
      case (depth > 90):
         return "#d73027"; //red
      case (depth > 70):
         return "#fc8d59"; //darkorange
      case (depth > 50):
         return "#fee08b"; //lightorange
      case (depth > 30):
         return "#d9ef8b"; //yellow
      case (depth > 10):
         return "#91cf60"; //yellowgreen
      default:
         return "#1a9850"; //green
   }
};

function createFeatures(earthquakeData) {

   // define a function and run once for each feature in the features array
   // give each feature a popup describing the place and time of the earthquake
   var earthquakes = L.geoJSON(earthquakeData, {
      onEachFeature: function(feature, layer) {
         layer.bindPopup("<h3>Magnitude: " + feature.properties.mag +"</h3><h3>Depth: " + feature.geometry.coordinates[2] + " km</h3><hr><h4>Location: " + feature.properties.place + "</h4><hr><p>" + new Date(feature.properties.time) + "</p>");
      },

      pointToLayer: function(feature, latlng) {
         return new L.circle(latlng, {
            radius: circleSize(feature.properties.mag),
            fillColor: circleColor(feature.geometry.coordinates[2]),
            color: "black",
            weight: .5,
            fillOpacity: 0.8
         })
      }
   });
  
   // send earthquakes layer to the createMap function
   createMap(earthquakes);
}

function createMap(earthquakes) {

   // define lightmap layer
   var lightmap = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      tileSize: 512,
      maxZoom: 18,
      zoomOffset: -1,
      id: "mapbox/light-v10",  
      accessToken: MAPBOX_KEY
   });

提前感谢您所能提供的任何帮助。这是我第一次部署到Heroku，所以这对我来说是全新的。

快速解决方案

在您的php代码中，在操作系统层的web渲染之前读取此变量，因为php能够做到这一点：

php不是我的拿手好戏，但我确信它有几个选项可以将此var注入静电html或javascript

如果没有，可以在静电文件中使用普通字符串替换：

im_your_file.js

zoomOffset: -1,
id: "mapbox/light-v10",  
accessToken: @@MAPBOX_KEY@@

另一个_php_file.php

replaceStringInFile("@@MAPBOX_KEY@@")

肮脏的解决方案

使用此替换另一个php文件中的文件中的内容，并在应用程序启动之前从某个Heroku步骤调用它

您可以使用纯bash执行此文件替换，并在某个Heroku步骤中调用它

优雅的解决方案

Webapck变量注入

最佳解决方案

不是直接读取javascript中的var，而是必须在php应用程序中发布一种睡觉端点，比如/settings.php。此终结点必须将此变量和其他变量作为json返回。

在javascript文件中，要直接使用变量，请使用/settings.php，您将在javascript代码中拥有所需的变量。

这篇关于无法从Java应用程序访问Heroku配置变量中的API密钥的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

无法从Java应用程序访问Heroku配置变量中的API密钥

问题描述

推荐答案

快速解决方案

肮脏的解决方案

优雅的解决方案

最佳解决方案

基础教程推荐