JSONP - " SyntaxError:missing;在陈述之前#34;或者"阻止跨源请求"

时间:2017-05-19 13:53:16

标签: javascript json ajax wordpress cors

我试图将Gumroad API用于Wordpress插件,并试图了解如何拨打任何电话,在我的情况下获取。

我在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

enter image description here

我无法使用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).

非常感谢任何建议!

2 个答案:

答案 0 :(得分:2)

创建另外一个php ie: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);
    }       
});

答案 1 :(得分: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;
}