将 API 放在 javascript 中时，API 没有在控制台中获取数据？答案

【问题标题】：API is not fetching data in console when it is placed in javascript?将 API 放在 javascript 中时，API 没有在控制台中获取数据？
【发布时间】：2020-12-04 07:59:43
【问题描述】：

<html>
 <head>
 <title>Vehicle Smart Sample</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </head>
 <body>
 <form id="vehicle-smart-sample-form">
 <label for="reg">Enter your reg</label>
 <input type="text" id="reg"/>
 <button type="submit">Search</button>
 </form>
 <div id="results">
 Results will appear here.
 </div>
 </body>
 <script type="text/javascript">
 var myAppId = "<REPLACE-WITH-YOUR-API-KEY!>";
 $(document).ready(function () {
 $("#vehicle-smart-sample-form").submit(function (e) {
 e.preventDefault();
 var reg = $("#reg").val();
 $.ajax({
 "async": true,
 "crossDomain": true,
 "url": "https://api.vehiclesmart.com/rest/vehicleData?reg=" + reg + "&isRefreshing=false&appid="+myAppId,
 "method": "GET",
 "headers": {
 "Content-Type": "application/text",
 "Accept": "application/json",
 "Cache-Control": "no-cache"
 }
 }).done(function (response) {
 console.log(response);
 if (response && response.Success) {
 $("#results").html(
 "<p>Make:" + response.VehicleDetails.Make + "</p>" +
 "<p>Model:" + response.VehicleDetails.Model + "</p>" +
 "<p>Taxed:" + response.VehicleDetails.Taxed + "</p>" +
 "<p>Motd:" + response.VehicleDetails.Motd + "</p>"
 );
 } else {
 $("#results").html(
 "<p>ERROR: "+response.ServiceMessage+"</p>"
 );
 }
 });
 });
 });
 </script>
</html>

现在的问题是他们已经通知我注意 - 您不应该将 API 密钥放在 HTML / JavaScript 中，然后我将 API 密钥放在其中以获取我需要的值我想在 Wordpress 中实现它我还需要 PHP 代码来获得结果吗

【问题讨论】：

标签： json wordpress api

【解决方案1】：

您将无法在 Javascript 代码中隐藏此密钥，唯一的方法是使用 PHP 或任何其他后端技术包装您的请求。

【讨论】：

谢谢您的建议
太棒了！为你喝彩！