问题描述
我有一个从 API 获取数据的简单网站。因此我必须使用 API 密钥。最初我所做的是使用 async 函数和 fetch() 从前端使用 vanilla js 调用 API。但我发现，如果我通过访问开发人员工具 --> 网络从前端调用 API，任何人都可以看到我的 API 密钥。
因此，我所做的是使用 fetchData.PHP 进行 API 调用并获取数据。在我的 App.js 中，我正在向该 fetchData.PHP 文件发出 AJAX 请求。
Q1) 那么这是保护我的 API 密钥的好方法吗？因为我没有从前端进行 API 调用？
Q2) 我是否应该做更多的事情来保护我的 API 密钥？
Q3) 这也是开发人员如何用 vanilla js 做这样的事情的方式吗？
App.js
var oXHR = new XMLHttpRequest();
oXHR.open("GET","fetchData.PHP",true);
oXHR.onload = function(evt)
{
const movies = JSON.parse(oXHR.responseText);
movies.results.forEach(movie => {
console.log(movie);
})
}
oXHR.onerror = function(evt)
{
alert("Error!");
}
oXHR.send();
fetchData.PHP
<?PHP
$API_KEY = '7013---------------------';
$imgBaseURL = 'http://image.tmdb.org/t/p/original';
$fetch_URL = "https://api.themoviedb.org/3/trending/all/week?api_key=$API_KEY";
$ch = curl_init();
curl_setopt($ch,CURLOPT_URL,$fetch_URL);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
$movies_json = curl_exec($ch);
echo $movies_json;
?>
任何指导都是最有帮助的。谢谢！！！
解决方法
首先，您只能在后端使用 API 密钥（在您的情况下为 PHP），然后它在网络选项卡中将不可见。
保护 API 的方法有很多，您可以使用 JWT 对有效用户进行身份验证并允许他们使用这些 API。
或者您可以将后端置于 API 网关之后，并根据需要配置网关。