使用Meetups API JavaScript获取数据 [英] Getting data with Meetups API javascript

问题描述

我正在尝试使用具有API密钥的metups API，但被CORS阻止.

I'm trying to use meetups API with an API key, but I'm being blocked by CORS.

我使用的示例见面会给出:https://api.meetup.com/2/events?key=mykey&group_urlname=ny-tech&sign=true，用我的API密钥替换API密钥.此示例来自此处.

I'm using the example meetup gives: https://api.meetup.com/2/events?key=mykey&group_urlname=ny-tech&sign=true, replacing the API key with my API key. This example comes from here.

这是我的代码(我取出了我的钥匙，并用< key>替换了它):

Here's my code (I took out my key and replaced it with < key>):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button id="find">find</button>
 <script>
        $("#find").click( function(){
          $.getJSON("https://api.meetup.com/2/events?key=<key>&group_urlname=ny-tech&sign=true", function(data){
            console.log(data);
          });
        });
</script>

我遇到这些错误:

在以下位置访问XMLHttpRequest ' https://api.meetup.com/2/events?key = aKey& group_urlname = ny-tech& sign = true ' 来自来源" http://127.0.0.1:5500 "已被CORS政策禁止: 请求中不存在"Access-Control-Allow-Origin"标头 资源. test.html:18

Access to XMLHttpRequest at 'https://api.meetup.com/2/events?key=aKey&group_urlname=ny-tech&sign=true' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. test.html:18

跨域读取阻止(CORB)被阻止 跨源响应 https://api.meetup.com/2/events?key = aKey& group_urlname = ny-tech& sign = true MIME类型为application/json.看 https://www.chromestatus.com/feature/5629709824032768 了解更多 详细信息.

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://api.meetup.com/2/events?key=aKey&group_urlname=ny-tech&sign=true with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

我是API的新手，我对这里发生的事情感到困惑.我知道metup的API上的一些API请求都需要OAuth，我仍在尝试中. 但是，由于这是文档中用于API密钥而不是OAuth的示例，因此我希望它可以与我的API密钥一起使用.当我将其简单地粘贴到浏览器中时，该请求即可工作，但是不是当我使用jQuery来抓取它时.

I'm new to API's and I'm confused about what's going on here. I know that some API requests on meetup's API need OAuth, which I'm still trying to grasp. However, since this was the example that was used for API keys in the docs as opposed to OAuth, I expected it to work with my API key. The request works when I simply paste it in the browser but not when I use jQuery to grab it.

文档在许多地方谈到CORS: 此处文档说

There are several places where the documentation talks about CORS: Here the documentation says

您必须使用OAuth才能从CORS中受益."

"you must be using OAuth to benefit from CORS."

此处

尽管我们支持第一方基于密钥的身份验证 应用程序，对于包含以下内容的第三方应用程序，我们需要OAuth 代表其他用户的操作.

While we support key-based authentication for first-party applications, we require OAuth for third-party applications that take actions on behalf of other users.

我没有代表其他用户采取行动.但是我是第三方应用程序吗?什么是第一方应用程序?在什么情况下我会处理请求?

I'm not taking action on behalf of other users. But am I a third party app? What would be a first party app? Under what circumstances would the request I'm making work?

推荐答案

类似Meetup的方法仅允许CORS处理通过OAuth进行身份验证的请求–

Looks like Meetup only allows CORS with requests that are authenticated via OAuth – reading this issue

一种方法是使用 jsonP .获得生成的API签名URL后，可以添加?callback=?作为第一个参数，它将对您有用.

One way is to use jsonP. After you get your generated API signature URL you can add ?callback=? as a first parameter and it will work for you.

下面是一个例子

$("#find").click(function() {
  $.getJSON("https://api.meetup.com/2/events?callback=?&offset=0&format=json&limited_events=False&group_urlname=ny-tech&page=200&fields=&order=time&desc=false&status=upcoming&sig_id=SIGID&sig=SIG", function(data) {
    console.log(data);
  }).fail(function(jqxhr, textStatus, error) {
    console.log("error", textStatus);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button id="find">find</button>

这篇关于使用Meetups API JavaScript获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！