AJAX経由でBigCommerce APIを呼び出す際に401エラーが発生する

Question

jQuery/AJAXを通じてAPIを呼び出すことで、クイック検索結果の最小購入数量を達成したいと考えています。私たちはAPIを呼び出そうとしていますが、応答は得られません。我々はquicksearch.jsファイルに追加したコードであり、続いて

NetworkError: 401 Unauthorized - https://mystore.mybigcommerce.com/api/v2/products/product_id

：私たちは、次のエラーメッセージを取得しています。

var key = 'API key'; 
var auth = 'Basic ' + btoa('username:'+key); 
var url = 'https://mystore.mybigcommerce.com/api/v2/products/product_id'; 

$.ajax({ 
    url : url, 
    method : 'GET', 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    async: false, 
    crossDomain: true, 
    beforeSend : function(req) { 
     req.setRequestHeader('Authorization', auth); 
    }, 
    success: function(result) { 
     alert('done'); 
     console.log(result); 
    }, 
    error: function (request, textStatus, errorThrown) { 
     console.log(request.responseText); 
     console.log(textStatus); 
     console.log(errorThrown); 
    } 
}); 

誰でもエラーを解決するために手引きできますか？

Answer 1

あなたはビッグコマースのAPIを呼び出すために、ライブサーバー上の別のPHPアプリケーションを作成することができます。

BigCommerce Store - 管理パネル - >詳細設定 - >従来のAPI設定からレガシーAPIアカウントを作成し、APIのURL、ユーザー名、トークンを取得できます。

次のコードを実装して、最小購入数量を取得することができます。

ファイル名はgetproductinfo.phpです。

<?php 
    header("Access-Control-Allow-Origin: *"); 
    header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS'); 

    $product_id = $_GET['prod_id']; 

    $username='username'; 
    $password='API token'; 
    $URL='https://mystoreurl.mybigcommerce.com/api/v2/products/'.$product_id; 

    $ch = curl_init(); 
    curl_setopt($ch, CURLOPT_URL,$URL); 
    curl_setopt($ch, CURLOPT_TIMEOUT, 30); //timeout after 30 seconds 
    curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type:UTF-8','Accept: application/json')); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER,1); 
    curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_ANY); 
    curl_setopt($ch, CURLOPT_USERPWD, "$username:$password"); 
    $status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE); //get status code 
    $result=curl_exec ($ch); 
    curl_close ($ch); 


    $data = json_decode($result,true); 
    $minimimOrder = $data['order_quantity_minimum']; 
    echo $minimimOrder;die(); 

    ?> 

応答（最小購入数量） - >あなたは結果として、次のコードを使用してquicksearch.jsファイルに取得することができます。

var url = 'http://liveserveripaddress/foldername/getproductinfo.php'; 
     $.ajax({ 
      url : url, 
      type : 'GET', 
      data : {prod_id:productid}, 
      dataType: "json", 
      crossDomain: true, 

      success: function(result) { 
       console.log(result); 
       }, 
      error: function (request, textStatus, errorThrown) { 
       console.log(request.responseText); 
       console.log(textStatus); 
       console.log(errorThrown); 
      } 
     }); 

Answer 2

CORSはサポートしていません。 javascriptからブラウザで直接APIを呼び出そうとするのは非常に不安です。これにより、誰かが基本認証で利用可能なストア内のデータにアクセスできるようにするAPIトークンが公開されます。これにはPIIが含まれます。

実際にAPIから情報を呼び出す必要がある場合は、直接呼び出すのではなく、スクリプトに特定の値を返す安全なWebサービスを使用してください。

Is BigCommerce API supports CORS?