使用webapi2和jquery实现Bluesnap

Question

我总是得到认证所需的窗口。当我调用蓝色快照沙箱URL。我已经搜索和阅读了一些文章，其中说，由于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" + ":" + "password"),
            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问题)。因此，我们尝试了从服务器端控制器调用BlueSnap API的替代方法。

控制器

 [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>

这种方法效果很好。我很想看看我们是否还有其他选择要实施。

谢谢Dev