AJAX endpoint with Developer Token

wayne5540 commented 8 years ago

I want to access ProductHunt api with developer token, basically it works fine at chrome and firefox but not Safari(9.0.2), my ajax call looks like:

$.ajax({
  url: "https://api.producthunt.com/v1/posts)",
  headers: {
    'Authorization': 'Bearer my-developer-token'
  },
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, err) {
    console.error(err);
  }
});

However in Safari I keep getting error like this:

[Error] XMLHttpRequest cannot load https://api.producthunt.com/v1/posts. Origin e is not allowed by http://mydomain.com Access-Control-Allow-Origin.

Looks like CORS issue so I google it and found out these issues:

https://github.com/producthunt/producthunt-api/issues/43 https://github.com/producthunt/producthunt-api/issues/54 https://github.com/producthunt/producthunt-api/issues/26

Therefore I tried code below:

$.ajax({
  url: "https://api.producthunt.com/v1/posts",
  dataType: 'jsonp',
  crossDomain: true,
  data: {
    access_token: 'Bearer my-developer-token'
  },
  success: function(data) {
    console.log(data)
  },
  error: function(xhr, status, err) {
    console.error(err);
  }
});

But I get

load resource: the server responded with a status of 401 (Unauthorized)

So...I have 2 questions:

How to call posts#index with jQuery ajax()? I'm not very good at js, could you give me a hint or tell me how to do this?
Should I use my developer token in production? I only need to access posts#index for my users without login required.

Very appreciate!

andreasklinger commented 8 years ago

i havent looked into this - re cors: it might be that you need to add a node proxy service between
Yes the developer token can be used for that - just be aware that you share it in public code by doing that

craze3 commented 8 years ago

Hey I've been having the same problem all day! I've set the correct headers & properly formatted my JSON data, but I keep getting this error: XMLHttpRequest cannot load https://api.producthunt.com/v1/users/username_here. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 404.

I'm using the HTTP.post method in Meteor.js. I think the solution may involve setting Access-Control-Allow-Origin: * on your API endpoints, but I'm not sure. Unlike the OP, I haven't even been able to get it to work in chrome.

I think this is high priority as well, since the PH hackathon just started!

andreasklinger commented 8 years ago

@craze3 you are receiving a 404 - are you sure you are passing the user_id not the user_username ? https://api.producthunt.com/v1/docs/users/users_show_get_details_of_a_user

craze3 commented 8 years ago

@andreasklinger Thanks for the prompt response. I just realized the issue was I was trying to POST when I should've been using GET o_@

It seems to be working now (with username too)!

wayne5540 commented 8 years ago

Hi @andreasklinger I found the potential problem, It might be a bug on server side.

The problem might happen at Access-Control-Request-Headers header, my chrome set this header as Access-Control-Request-Headers: accept, authorization however my safari set it as Access-Control-Request-Headers: accept, origin, authorization

So it seems like API didn't return CORS headers IF my http request is OPTIONS (which is first request fired by jQuery before my GET request) and my Access-Control-Request-Headers has origin.

You can reproduce by steps below:

Success Move:

Request:

curl 'https://api.producthunt.com/v1/posts?_=1456821720253' -X OPTIONS -H 'Access-Control-Request-Method: GET' -H 'Origin: http://stackoverflow.com' -H 'Accept-Encoding: gzip, deflate, sdch' -H 'Accept-Language: zh-TW,zh;q=0.8,en-US;q=0.6,en;q=0.4' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36' -H 'Accept: */*' -H 'Referer: http://stackoverflow.com/questions/1557602/jquery-and-ajax-response-header' -H 'Connection: keep-alive' -H 'Access-Control-Request-Headers: accept, authorization' -i

Returns:

HTTP/1.1 200 OK
Server: Cowboy
Date: Tue, 01 Mar 2016 08:49:00 GMT
Connection: keep-alive
Content-Type: text/plain
Access-Control-Allow-Origin: http://stackoverflow.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 1728000
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: accept, authorization
Transfer-Encoding: chunked
Via: 1.1 vegur

Failed Move:

Request:

curl 'https://api.producthunt.com/v1/posts?_=1456821720253' -X OPTIONS -H 'Access-Control-Request-Method: GET' -H 'Origin: http://stackoverflow.com' -H 'Accept-Encoding: gzip, deflate, sdch' -H 'Accept-Language: zh-TW,zh;q=0.8,en-US;q=0.6,en;q=0.4' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36' -H 'Accept: */*' -H 'Referer: http://stackoverflow.com/questions/1557602/jquery-and-ajax-response-header' -H 'Connection: keep-alive' -H 'Access-Control-Request-Headers: accept, origin, authorization' -i

Returns:

HTTP/1.1 404 Not Found
Server: Cowboy
Date: Tue, 01 Mar 2016 08:48:36 GMT
Connection: keep-alive
Content-Type: text/html; charset=utf-8
X-Request-Id: 415ffa74-7235-4ec9-bea0-125d311cdfcd
X-Runtime: 0.003084
Vary: Origin
Content-Length: 461
Via: 1.1 vegur