【问题标题】:Having issues making requests to an API using AJAX使用 AJAX 向 API 发出请求时遇到问题
【发布时间】:2020-02-08 03:05:18
【问题描述】:

我的公司使用 nocrm.io 软件来跟踪潜在客户和客户。我想在我们的 Web 应用程序中使用他们的 API 来获取和发布信息。目前,我在尝试使用他们的 API 在我们的 Web 应用程序中发出 http 请求时遇到问题。每次我尝试执行 GET 请求来 ping 我的 APIKey 时,都会返回 401 错误。我尝试通过 Postman 发出请求并且它们可以工作,但是当我尝试在我的应用程序中实现这些请求时它们却没有,这让事情有点令人沮丧。

如果有人使用过这个 API 或类似的东西可以帮助我,那就太好了。

这里是他们 API 的链接:https://youdontneedacrm.com/api#nocrm.io-api

目前我正在使用 jquery AJAX 来发出请求。我已经尝试将 APIKey 放在他们的 API 建议的标题中,但这只是给了我 401 和 CORS。他们的 API 还建议您可以将 APIKey 放在请求的参数中,但我仍然得到相同的 401 错误。

是的,我还确保我使用的 APIKey 是正确的,所以这不应该是问题。

我将请求放入浏览器,它返回 200 状态,表示我的 APIKey 也是正确的。

以下是当前给我 401 错误的原因。

我的文件.js

import $ from 'jquery'
const api_key = require('../../../env.config.json').CRM.API_KEY;

class Myfile extends React.Component{

 constructor(props){
  super(props);
  this.state = {}
 }

    PingApi(){
        var url = 'https://OUR_ACCOUNT.nocrm.io/api/v2/ping'
        var apikey = api_key

        var dataObject = {
            'X-API-KEY': apikey
        }

        $.ajax({
            type: 'GET',
            dataType: 'jsonp',
            url: url,
            data: dataObject,
            headers: {"Accept": "application/json"},
            crossDomain: true,
            beforeSend: function(xhr){
                xhr.withCredentials = true;
            },
            success: function(data, textStatus, jqXHR){
                console.log("Good");
            },
            error: function(jqXHR, textStatus, errorThrown){
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
            }
        })
    }


 render(){
  return(
   <button onClick={this.PingApi.bind(this)}>Ping API</button>
  );
 }
}

export default Myfile

我希望在返回 json 对象时获得 200 状态,但结果却是 401。

编辑 这是在 Postman 中工作的请求的屏幕截图。显然,出于安全原因,我屏蔽了敏感信息。是的,API 密钥与我在我们的网络应用中使用的相同。

【问题讨论】:

  • 您是否记录了api密钥并检查它是否正确?
  • @Keerthi 是的,我记录了 api 密钥,它们完全相同。
  • 你试过用axios调用api吗?我们一般在reactjs中使用axios来调用api。
  • @SuleymanSah 是的,我尝试过使用 axios,但它给了我 CORS 问题、Access-Control-Allow-Origin 和 Preflight 错误。 AJAX 似乎是唯一一种绕过这些问题的方法。
  • 你能发一个邮递员截图吗? (正如你所说的那样)

标签: javascript jquery reactjs express


【解决方案1】:

虽然您可以通过请求正文或标头(根据文档)传递 API 密钥,但您发送的是没有正文的 GET 请求。通过标题传递它:

headers: {"Accept": "application/json", "X-API-KEY": apikey}

【讨论】:

  • 这个答案的问题是现在我得到 CORS Preflight 错误。这是因为我们正在添加自定义标头,而且我们都知道 CORS 不喜欢自定义标头。
猜你喜欢
  • 1970-01-01
  • 2015-09-16
  • 1970-01-01
  • 2018-09-13
  • 2016-02-15
  • 2017-02-07
  • 1970-01-01
  • 2019-05-08
  • 1970-01-01
相关资源
最近更新 更多