CODEWITHSUNDEEP
javascriptjqueryhttpcross-domainchargify
Dan Ramos
Dan Ramos

Reputation: 1102

jQuery cross domain post redirect

I'm trying to use jQuery to POST a form to chargify. My "Net" tab shows a 302 redirect (in red indicating an error), but jQuery is throwing a 404 error. Is it possible to preform a x-domain, post, redirect request from the browser or will I need to use proxy?

$(function() {

    var endpoint = "https://api.chargify.com/api/v2/signups"

    $('#new_sub_form').on('submit', function(e){

        e.preventDefault()

        var jqxhr = $.ajax({
            type: "POST",
            url: endpoint,
            crossDomain:true,
            data: $('#new_sub_form').serialize(),
            success: function(data, textStatus, request){
                console.log(request.getResponseHeader('Location'));
            },
            error: function (request, textStatus, errorThrown) {
                console.log(request.getResponseHeader('Location')); // Returns null
            }
        })
    })//on('submit')
})//ready()

UPDATE (more info): So I realized the 302 was redirecting me to a page that didn't exist on my server. Unfortunately once i fixed this, I still have an issue. From what I can tell, i POST to chargify, they then send a 302 back to the browser with the URI I specified. This URI is located on my server (localhost for now). Once the user is redirected my server parses the response and returns JSON. I tested the Response Header location via copy and paste into another tab and works fine.

Chargify is only offering https, while my localhost is http. Would this cause the error?! HTTP Response

Upvotes: 1

Views: 2472

Answers (2)

angularsen
angularsen

Reputation: 8668

Chargify Direct does not support ajax/CORS.

You should use a "transarent redirect", as they describe, which is basically a standard form post redirecting the user to Chargify, and they will redirect the user back again to the URL you specify in the payload. This means the user will briefly leave your site and return back to it.

<form method="post" action="https://api.chargify.com/api/v2/signups">
</form>

Docs: https://docs.chargify.com/chargify-direct-introduction

Upvotes: 0

L&#225;t&#243; Gergely
L&#225;t&#243; Gergely

Reputation: 11

Ran into to a very similar problem the other day. However im using ASP.NET MVC4.

Its not enough if you use crossDomain:true u also need to add, dataType: 'json or html depending on the return value', xhrFields: { withCredentials: true }, You will also need to add these headers "Access-Control-Allow-Origin:"http://yourdomain.net" , Access-Control-Allow-Credentials:true" and maybe "Access-Control-Allow-Methods:GET,POST" in your case aswell to your RESPONSE.

Upvotes: 0

Related Questions