Внедрение bluesnap api с использованием webapi2 и jquery

Question

Я всегда получаю окно для проверки подлинности. когда я вызываю синий URL-адрес для песочницы. Я googled и прочитал статью, в которой говорится, что из-за CORS появляется окно с сообщением об аутентификации. Я попытался добавить базовую аутентификацию в самом заголовке, но не повезло.

JS код

$(document).ready(function() { 
    $('#paymentsubmit').click(function(e) { 
     xmlstring = 
      "<?xml version='1.0'?>" + 
      "<card-transaction xmlns='http://ws.plimus.com'>" + 
      "<card-transaction-type>AUTH_ONLY</card-transaction-type>" + 
      "<recurring-transaction>ECOMMERCE</recurring-transaction>" + 
      "<soft-descriptor>DescTest</soft-descriptor>" + 
      "<amount>11.00</amount>" + 
      "<currency>USD</currency>" + 
      "<card-holder-info>" + 
      "<first-name>test first name</first-name>" + 
      "<last-name>test last name</last-name>" + 
      "</card-holder-info>" + 
      "<credit-card>" + 
      "<card-number>4263982640269299</card-number>" + 
      "<security-code>837</security-code>" + 
      "<expiration-month>02</expiration-month>" + 
      "<expiration-year>2018</expiration-year>" + 
      "</credit-card>" + 
      "</card-transaction>"; 

     $.ajax({ 
      data: xmlstring, 
      Authorization: "Basic " + btoa("API_14655582321891175640599" + ":" + "Aut0mat!c"), 
      dataType: 'jsonp', 
      xhrFields: { 
       withCredentials: true 
      }, 
      contentType: 'application/xml', 
      bluesnapversion: '2.0', 
      type: 'POST', 
      // beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', 'Basic ' + btoa('API_14655582321891175640599' + ':' + 'Aut0mat!c')); }, 
      url: 'https://sandbox.bluesnap.com/services/2/transactions' 

     }).done(function(data) { 
      alert('Registered Successfully'); 
     }).error(function(jqXHR, textStatus, errorThrown) { 
      alert(jqXHR.responseText || textStatus); 
     }) 
    }); 
}); 

Answer 1

После нескольких дней исследований мы обнаружили, что это bluesnap реализация не работает на стороне клиента непосредственно (Получение некоторых CORS проблем даже после добавления всех необходимых заголовков и других материал). поэтому мы попробовали альтернативный метод вызова API BlueSnap с серверного контроллера.

Контроллер

[EnableCors(origins: "http://localhost:49369", headers: "*", methods: "*", exposedHeaders: "X-Custom-Header")] 

    public class BlueSnapController : ApiController 
    { 
     [ActionName("PostBlueSnapData")] 
     [HttpPost] 
     public IHttpActionResult PostBlueSnapData(UtilityModels bluesnapmodels) 
     { 
      string responseFromServer = string.Empty; 
      try 
      { 
       // Create a request using a URL that can receive a post. 
       HttpWebRequest request = (HttpWebRequest)WebRequest.Create("https://sandbox.bluesnap.com/services/2/transactions"); 
       // Set the Method property of the request to POST. 
       request.Method = "POST"; 
       request.Headers["Authorization"] = "Basic QVBJ&zE0NjU1NTgyNzIxODkxMTc1NjQwNTk5OkF1dDBtYXQhYw=="; 
       request.UserAgent = ".NET Framework Test Client"; 
       string postData = bluesnapmodels.XMLData; 
       byte[] byteArray = Encoding.UTF8.GetBytes(postData); 
       request.ContentType = "application/xml"; 
       request.ContentLength = byteArray.Length; 
       Stream dataStream = request.GetRequestStream(); 
       dataStream.Write(byteArray, 0, byteArray.Length); 
       dataStream.Close(); 

       // Get the response. 

       HttpWebResponse myHttpWebResponse = (HttpWebResponse)request.GetResponse(); 
       Console.WriteLine((myHttpWebResponse.StatusDescription)); 
       dataStream = myHttpWebResponse.GetResponseStream(); 
       StreamReader reader = new StreamReader(dataStream); 
       responseFromServer = reader.ReadToEnd(); 
       Console.WriteLine(responseFromServer); 
       reader.Close(); 
       dataStream.Close(); 
       myHttpWebResponse.Close(); 
      } 
      catch (WebException wex) 
      { 
       var pageContent = new StreamReader(wex.Response.GetResponseStream()) 
             .ReadToEnd(); 

       Console.WriteLine(wex.Message); 
      } 


      return Ok(responseFromServer); 

     } 


    } 

Ajax вызова

<script> 
$(document).ready(function() { 

    $('#paymentsubmit').click(function (e) { 

     var xmlstring = 
     "<?xml version='1.0'?>" + 
        "<card-transaction xmlns='http://ws.plimus.com'>" + 
        "<card-transaction-type>AUTH_ONLY</card-transaction-type>" + 
        "<recurring-transaction>ECOMMERCE</recurring-transaction>" + 
        "<soft-descriptor>DescTest</soft-descriptor>" + 
        "<amount>11.00</amount>" + 
        "<currency>USD</currency>" + 
        "<card-holder-info>" + 
         "<first-name>test1 first name</first-name>" + 
         "<last-name>test1 last name</last-name>" + 
         "</card-holder-info>" + 
         "<credit-card>" + 
         "<card-number>4263982640269299</card-number>" + 
      "<security-code>837</security-code>" + 
      "<expiration-month>02</expiration-month>" + 
      "<expiration-year>2018</expiration-year>" + 
     "</credit-card>" + 
        "</card-transaction>"; 

     var blueSnapData = { 
      XMLData: xmlstring 

      } 

     $.ajax({ 
      withCredentials: true, 
      type: 'POST', 
      url: 'http://localhost:4233/api/BlueSnap/PostBlueSnapData', 
      data: blueSnapData 
     }).done(function (data) { 
      alert('Registered Successfully' + '/n'+data); 
     }).error(function (jqXHR, textStatus, errorThrown) { 
      alert(jqXHR.responseText || textStatus); 
     }) 


    }); 

}) 


</script> 

Этот метод работает отлично. Мне любопытно узнать, есть ли у нас какие-либо другие варианты реализации.

Thanks Dev