JSONP — “SyntaxError: missing ; before statement”或“Cross-Origin Request Blocked”

Question

我正在尝试将 Gumroad API 用于 Wordpress 插件，并尝试了解如何拨打电话，在我的情况下是 GET。

我在 Stack Overflow 上搜索了很多代码示例，但仍然无法在没有任何错误的情况下运行它。

Plain JS 或 jQuery.ajax 是可以接受的。 我的 jQuery 版本是 1.12.4

当我使用 JSNOP 时，我在 firefox webdev 工具中得到响应，但在 JS 中仍然出现错误，因为 API 返回 JSON（如 docs 中所述）。

我尝试了多种代码变体：

代码 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);
    }
});

代码 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);
}

但错误总是一样的：

错误：

SyntaxError: missing ; before statement

回应：

{
  "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
    }]
}

请求的网址

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

---

由于另一个错误，我不能使用 JSON 请求类型：

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).

非常感谢您的任何建议！

Answer 1

API 调用只能通过服务器进行。使用 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;
}

Answer 2

创建 1 个额外的 php 即：testing.php 文件以获取该 JSON 响应，然后从您的 ajax 请求中调用该 php 文件。

PHP 文件

$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);
    }       
});