如何使用 API 密钥进行 Ajax 调用？答案

【问题标题】：How to use an API Key for an Ajax call?如何使用 API 密钥进行 Ajax 调用？
【发布时间】：2017-12-28 21:33:28
【问题描述】：

我第一次尝试包含来自 New York Times API (http://developer.nytimes.com/) 的 API 密钥，并使用 ajax 从中获取新闻以填充本地网站，但我没有看到任何结果。有人告诉我确保您的 API 密钥已在 URL 的查询参数中设置，但我不知道该怎么做。

 ?api-key=your-key

这是我所做的：

// Built by LucyBot. www.lucybot.com
var url = "https://api.nytimes.com/svc/search/v2/articlesearch.json";
url += '?' + $.param({
'api-key': "111111111111111111111111111111"
});
$.ajax({
url: url,
method: 'GET',
}).done(function(result) {
console.log(result);
}).fail(function(err) {
throw err;
});

我需要查看各种故事（例如业务、技术等）的 json 格式的 url，并将它们用于 ajax 调用。

【问题讨论】：

标签： javascript jquery json ajax api

【解决方案1】：

试试这个我正在从这里获取数据

var url = "https://api.nytimes.com/svc/search/v2/articlesearch.json";
url += '?' + $.param({
  'api-key': "11111111111111111111111"
});
$.ajax({
  url: url,
  method: 'GET',
  dataType: 'JSON',
  success: function(data) {
    console.log(data)
  },
  error: function(err) {
    console.log('error:' + err)
  }
})

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

你也可以像下面这样尝试

var url = "https://api.nytimes.com/svc/search/v2/articlesearch.json";
$.ajax({
  url: url,
  method: 'GET',
  dataType: 'JSON',
  data: {
    'api-key': '11111111111111111'
  },
  success: function(data) {
    console.log(data)
  },
  error: function(err) {
    console.log('error:' + err)
  }
})

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

试试上面的脚本更改api键，看看你会得到数据
您应该使用 POST 传递任何敏感内容，例如密码、密钥等。来自 developer.nytimes.com -> 所有适合 POST 的 API。
我设法将我的 api 密钥添加到 url 的末尾以查看 json 格式，但仍然需要找到一种方法来进行 ajax 调用，以便在浏览器中查看带有图片的故事。

【解决方案2】：

直接在客户端上下文中公开 API 密钥不是一个好习惯。

我强烈建议在浏览器和 API 之间创建一个抽象层。

这个想法是将 AJAX 请求定位到一个自己的后端操作，例如：

var url = "www.mydomain.com/api/articlesearch";
$.ajax({
url: url,
method: 'GET',
}).done(function(result) {
    console.log(result);
}).fail(function(err) {
    throw err;
});

在后端 (/api/articlesearch) 中，我们使用 API 密钥将针对 NY Times 的请求放置在

通过这种方式，您可以获得更适合 javascript 的代码，同时保持职责的正确分配。

PS：如果你想让它更安全，你可以使用环境变量定义 API Key。这是一个用 Ruby 制作的示例（仅供参考）：

# Inside ApisController
def articlesearch
    response = RestClient::Request.execute(
    method: :get,
    url: 'https://api.nytimes.com/svc/search/v2/articlesearch.json',
    headers: {api_key: ENV['API_KEY']})

    render json: response
end

使用这种方法，API 密钥也不会出现在 GIT 存储库中：)

【讨论】：

为了使@Gabriel Gomes 示例正常工作，我必须在标题中添加“params: {key: value}”

【解决方案3】：

嗯，你应该这样试试。它应该给你一个没有跨域错误的结果：

$.ajax({
  type: 'GET',
  url: 'http://api.nytimes.com/svc/search/v2/articlesearch.json',
  data: {
    'q': queryString,
    'response-format': "jsonp",
    'api-key': nytApiKey,
  },
  success: function(data) {
    // passed function object for data processing 
    console.log(data);
  },
  error: function(err) {
    console.log('error:' + err)
  }
});

【讨论】：