Trouble with cross-domain API calls

Jack Mumby

Hi all,


I'm trying to create an offsite form using 40Nuggets that dumps into Luminate online. I copied this code from a splash page we're using on our main page and it works fine, but now I'm getting this error message:


Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://secure2.convio.net/comcau/site/CRConsAPI?luminateExtend=1.7.1&api_key=COMCAU_API_KEY&method=getLoginUrl&response_format=json&v=1.0. (Reason: CORS header 'Access-Control-Allow-Origin' missing).


Here's the code in question. Any idea how I could fix this? I've heard from BB support that Noah Cooper might be able to help out.

 

---

(function($) {

                var cb_surveyForm = $('.cb-lo-survey')

                        , cb_step1 = $('.cb-step1')

                        , cb_step2 = $('.cb-step2');

                $.fn.displayErrorMessage = function(message) {

                    $(this).removeErrorMessage().prepend('<div class="cb-errors"><div>' +

                            (message === undefined ? '<b>Please make sure you have provided a valid value for highlighted fields.</b>' : message) +

                            '</div></div>');

                    return this;

                };

                $.fn.removeErrorMessage = function() {

                    $(this).find('.cb-errors').remove();

                    return this;

                };

                $.fn.submitLoading = function() {

                    $(this).bind('submit', function() {

                        $(this).before('<div class="cb-loading">Please wait ...</div>').hide();

                    });

                    return this;

                };

                $.fn.bindLuminateForm = function(options) {

                    var settings = $.extend({

                        onBeforeLuminateExtendSubmit: $.noop,

                        customFormValidation: function() {

                            return [];

                        }

                    }, options || {});

                    $(this).unbind('submit').bind('submit', function(e) {

                        var hasErrors = false, errMessages = [];

                        $(this).find('.required').each(function() {

                            var fieldName = $(this).attr('name');

                            $(this).removeClass('error');

                            $('label[for="' + fieldName + '"]').removeClass('error');

                            if ($(this).attr('type') === 'radio') {

                                if (!$('input[name="' + fieldName + '"]:checked').val()) {

                                    $('label[for="' + fieldName + '"]').addClass('error');

                                    hasErrors = true;

                                }

                            } else {

                                var fieldValue = $.trim($(this).val());

                                if (fieldValue === '') {

                                    $(this).addClass('error');

                                    hasErrors = true;

                                }

                            }

                        });

                        var customValidationErrors = luminateExtend.utils.ensureArray(settings.customFormValidation());

                        if (customValidationErrors.length > 0) {

                            hasErrors = true;

                            errMessages.push(customValidationErrors);

                        }

                        if (hasErrors) {

                            var errorsList = $('<ul></ul>');

                            if (errMessages.length > 0) {

                                if (errMessages.length > 1) {

                                    for (var i = 0; i < errMessages.length; i++) {

                                        errorsList.append($('<li class="text-danger">' + errMessages[i] + '</li>'));

                                    }

                                } else {

                                    errorsList.append($('<li class="text-danger">' + errMessages[0] + '</li>'));

                                }

                            }

                            $(this).displayErrorMessage().find('.cb-errors').append($('<p></p>').append(errorsList).html());

                        } else {

                            settings.onBeforeLuminateExtendSubmit();

                            $(this).unbind('submit').submitLoading();

                            luminateExtend.api.bind();

                            $(this).submit();

                        }

                        e.preventDefault();

                    });

                    return this;

                };

                window.surveyCallback = {

                    error: function(data) {

                        cb_surveyForm.displayErrorMessage(data.errorResponse.message);

                        cb_step1.find('.cb-loading').remove();

                        cb_surveyForm.show();

                    },

                    success: function(data) {

                        cb_surveyForm.removeErrorMessage().find('.cb-loading').remove();

                        cb_step1.find('.cb-loading').remove();

                        if (data.submitSurveyResponse.success == 'false') {

                            cb_surveyForm.displayErrorMessage('');

                            var surveyErrors = luminateExtend.utils.ensureArray(data.submitSurveyResponse.errors);

                            $.each(surveyErrors, function() {

                                if (this.errorField) {

                                    $('input[name="' + this.errorField + '"]').addClass('error');

                                    cb_surveyForm.find('.cb-errors').append('<div>' + this.errorMessage + '</div>');

                                }

                            });

                            cb_surveyForm.show();

                        }

                        else {

                            try {

                                setCookie("subscribed", "true", 365);

                            } catch (err) {

                            }

                            cb_surveyForm.unbind('submit');

                            cb_step1.hide();

                            cb_step2.show();

                            // Google Analytic

                            addGoogleAnalyticsEvent('survey: ' + cb_surveyForm.find('input[name="survey_id"]').val(), window.location.href);

                        }

                    }

                };

                function addGoogleAnalyticsEvent(action, label) {

                    if (typeof (dataLayer) === "object") {

                        dataLayer.push({'event': '40Nuggets', 'fnAction': action, 'fnLabel': label});

                    }

                    if (typeof (ga) === "function") {

                        ga('send', 'event', '40nuggets', action, label);

                    } else if (typeof (_gaq) === "object") {

                        _gaq.push(['_trackEvent', '40nuggets', action, label]);

                    }

                }

                function cb_init() {

                    luminateExtend({

                        apiKey: 'COMCAU_API_KEY',

                        path: {

                            nonsecure: 'http://act.commoncause.org/site/',

                            secure: 'https://secure2.convio.net/comcau/site/'

                        }

                    });

                    cb_surveyForm.attr('action', luminateExtend.global.path.secure + 'CRSurveyAPI').bindLuminateForm();

                    $('input[name="cons_email"]').bind("keyup blur", function() {

                        $('.cb-fn-email').val($(this).val());

                    });

                }

                if (typeof luminateExtend == 'undefined') {

                    $.getScript('//cdnjs.cloudflare.com/ajax/libs/luminateExtend/1.7.1/luminateExtend.min.js', function() {

                        cb_init();

                    });

                } else {

                    cb_init();

                }

            })(jQuery);

Noah Cooper

That error message indicates that you've not whitelisted the domain you're making the API call from. See https://github.com/noahcooper/luminateExtend:

For security reasons, the API and this library limit requests to a list of domains whitelisted by your organization. If you haven't already done so, go to Setup -> Site Options -> Open API Configuration, and click "Edit Javascript/Flash configuration". For the purposes of using this library, the only options you need to worry about on this page are 1. Allow JavaScript/Flash API from these domains and 2. Trust JavaScript/Flash API from these domains. Add any domains where you will use this library to these lists. As noted on the page, you can use an asterisk as a wildcard if your website has multiple subdomains, e.g. "*.myorganization.com"

Jack Mumby

Wow, I feel silly. I added it to the whitelist before I reached out to BB support, but mispelled my own domain name. Thanks for the quick response and help, Noah!