CODEWITHSUNDEEP
javascriptjsonajaxwordpresscors
Ilya Kanatov
Ilya Kanatov

Reputation: 103

JSONP — "SyntaxError: missing ; before statement" or "Cross-Origin Request Blocked"

I'm trying to use Gumroad API for Wordpress plugin, and trying to understand how to make any call, GET in my case.

I searched a lot for code examples on Stack Overflow but still can't run it without any errors.

Plain JS or jQuery.ajax is acceptable. My jQuery version is 1.12.4

When I use JSNOP I get the response in firefox webdev tools, but still get an error in JS, becouse the API returns JSON (as described in docs).

I tried numbers of code variations:

Code 1

jQuery.ajax({
    dataType: 'jsonp',
    url: 'https://api.gumroad.com/v2/products',
    data: {
        'access_token': '676234257caeb63ca7683c39d14e0091387a1a36af0c2135f989d0fd84ffc0c5'
    },
    success: function(data){
        console.log(data);
    },
    error: function(d){
        console.log(d);
    }
});

Code 2

jQuery(document).ready(function() { 
    var url = 'https://api.gumroad.com/v2/products/';
    url += '?method=getQuote';
    url += '&format=jsonp';
    url += '&lang=en&';
    url += 'jsonp=myJsonMethod';
    url += '&?callback=?';
    url += '&access_token=676234257caeb63ca7683c39d14e0091387a1a36af0c2135f989d0fd84ffc0c5';
    jQuery.getJSON(url);
});

function myJsonMethod(response){
  console.log (response);
}

But the error is always the same:

Error:

SyntaxError: missing ; before statement

Response:

{
  "success": true,
    "products": [{
      "name": "Test",
      "url": "https://s3.amazonaws.com/gumroad/attachments/1295292066926/b81638b60726496a98e63d2cc7d80075/original/IMG_09032017_123025.png",
      "preview_url": "https://static-2.gumroad.com/res/gumroad/1295292066926/asset_previews/a4a204f68be7087dd360a142e620728e/retina/Color_Wheel.png",
      "description": "\n\u003cp\u003eOffer test\n\n\u003c/p\u003e\n",
      "customizable_price": false,
      "webhook": null,
      "require_shipping": false,
      "custom_receipt": "",
      "custom_permalink": null,
      "subscription_duration": null,
      "id": "MmaHg-V0-uqWW4T2W_-LLw==",
      "custom_product_type": null,
      "countries_available": [],
      "price": 1000,
      "currency": "usd",
      "short_url": "https://gum.co/qiHIX",
      "formatted_price": "$10",
      "published": true,
      "shown_on_profile": true,
      "file_info": {
        "Size": "187 KB",
        "Resolution": "1080p"
      },
      "max_purchase_count": null,
      "deleted": false,
      "custom_fields": [],
      "custom_summary": "",
      "variants": [],
      "sales_count": 0,
      "sales_usd_cents": 0,
      "view_count": 6
    }]
}

Requested URL

https://api.gumroad.com/v2/products?callback=jQuery112409655243732650752_1495261525390&access_token=676234257caeb63ca7683c39d14e0091387a1a36af0c2135f989d0fd84ffc0c5&_=1495261525391

enter image description here

I can't use JSON request type becouse it couse of another error: 

Cross-Origin Request Blocked:
    The Same Origin Policy disallows reading the remote resource
    at https://api.gumroad.com/v2/products.
    (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Thanks a lot for any suggestions!

Upvotes: 0

Views: 639

Answers (2)

rheeantz
rheeantz

Reputation: 1020

Create 1 additional php ie : testing.php file to get that JSON response , then call that php file from your ajax request.

PHP FILE

$url = 'https://api.gumroad.com/v2/products?callback=jQuery112409655243732650752_1495261525390&access_token=676234257caeb63ca7683c39d14e0091387a1a36af0c2135f989d0fd84ffc0c5&_=1495261525391';
header('Content-Type: application/json');
echo file_get_contents($url);

Javasript 

jQuery.ajax({
    url  : 'testing.php',
    method: 'GET',
    success: function( data, txtStatus) {
    console.log(data);
    }       
});

Upvotes: 2

Thisismint
Thisismint

Reputation: 188

The API call will only work via the server. Use PHP / cURL.

$curl = curl_init();

curl_setopt_array($curl, array(
    CURLOPT_URL => "https://api.gumroad.com/v2/products",
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "GET",
    CURLOPT_HTTPHEADER => array(
     "authorization: XX Your Profile Key",
     "cache-control: no-cache"
    ),
));

//Fetch value from Gumroad
$response = curl_exec($curl);

//Get products from string
$prod = filter_var($response, FILTER_SANITIZE_NUMBER_INT);

//Throw error
$err = curl_error($curl);
curl_close($curl);

//Print result
if ($err) {
    echo "400";
} 
else {
    echo $prod;
}

Upvotes: 1

Related Questions