I have a little problem, I created a wordpress theme with documentation created with the site helpscout, to reduce the number of support ticket, I would like to do the same thing EDD: https://easydigitaldownloads.com/support/, if you click on "Submit Support Request", an input appears and if you enter a word, for example, "google", links to helpscout documentation are available, then you can create a request. I copied the code of this site, I created a multi-part form with gravity form, everything works well, except looking towards the doc, here is the code I entered my functions.php file:

function support_form() {

    if ( ! wp_script_is( 'gform_gravityforms' ) ) {
        return;
    } ?>

    <script type="text/javascript">
        jQuery(document).ready(function($) {

            var wrap      = $('.gform_body .gfield.helpscout-docs');
            var paging    = $('.gform_body .gform_page_footer');
            var hidden    = $('.gform_body .gfield.helpscout-docs').next().find('input');
            var field     = wrap.find('input[type="text"]');
            var searching = false, allowed = false;

            paging.hide();

            wrap.append( '<div class="docs-search-wrap"></div>' );
            field.attr( 'autocomplete', 'off' );

            paging.find('input[type="submit"]').on('click', function(e) {

                if( ! allowed ) {

                    return false;
                }

            });

            field.keyup(function(e) {

                query = $(this).val();

                if( query.length < 4 ) {
                    return;
                }

                var html = '<ul class="docs-search-results">';

                if( ! searching ) {

                    var count = 0;

                    // Getting Started
                    $.ajax({
                        url: 'https://docsapi.helpscout.net/v1/search/articles?collectionId=56d89d519033600eafd436e4&query=' + query,
                        headers: {
                            'Authorization': 'Basic <?php echo base64_encode( 'username:password' ); ?>'
                        },
                        xhrFields: {
                            withCredentials: false
                        },
                        beforeSend: function() {
                            searching = true;
                        },
                        success: function(results) {

                            count += results.articles.items.length;

                            $.each( results.articles.items, function( key, article ) {
                                html = html + '<li class="article"><a href="' + article.url + '" title="' + article.preview + '" target="_blank">' + article.name + '</a><li>';
                            });
                        }
                    }).done(function() {

                        // FAQs
                        $.ajax({
                            url: 'https://docsapi.helpscout.net/v1/search/articles?collectionId=56d8b3c9c6979159b4453cf6&query=' + query,
                            headers: {
                                'Authorization': 'Basic <?php echo base64_encode( 'username:password' ); ?>'
                            },
                            xhrFields: {
                                withCredentials: false
                            },
                            beforeSend: function() {
                                searching = true;
                            },
                            success: function(results) {

                                count += results.articles.items.length;

                                $.each( results.articles.items, function( key, article ) {
                                    html = html + '<li class="article"><a href="' + article.url + '" title="' + article.preview + '" target="_blank">' + article.name + '</a><li>';
                                });
                            }

                        }).done(function() {

                            // Extensions
                            $.ajax({
                                url: 'https://docsapi.helpscout.net/v1/search/articles?collectionId=56d8b96fc6979159b4453d22&query=' + query,
                                headers: {
                                    'Authorization': 'Basic <?php echo base64_encode( 'username:password' ); ?>'
                                },
                                xhrFields: {
                                    withCredentials: false
                                },
                                beforeSend: function() {
                                    searching = true;
                                },
                                success: function(results) {

                                    count += results.articles.items.length;

                                    $.each( results.articles.items, function( key, article ) {
                                        html = html + '<li class="article"><a href="' + article.url + '" title="' + article.preview + '" target="_blank">' + article.name + '</a><li>';
                                    });
                                }
                            }).done(function() {
                                html = html + '</ul>'
                                html = '<span class="results-found">' + count + ' results found . . . </span>' + html;
                                wrap.find('.docs-search-wrap').html( html );
                                paging.show();
                                searching = false;
                            });
                        });
                    });


                }

            });
        });

    </script>

<?php
}

add_action( 'send_headers', 'add_header_acao' );
function add_header_acao() {
    header( 'Access-Control-Allow-Origin: *' );
}

But when I enter a word in the input I receive an error message in the console: "No 'Access-Control-Allow-Origin' header is present on the requested resource."

I have not inserted the " 'Access-Control-Allow-Origin" correctly? Is it because of the "username:password", I set the username and password from my dashboard help scout, maybe it is not that I need to insert.

Can you help me?

Thank you a lot :)

I found !!! It had nothing to do with "Access-Control-Allow-Origin" was because of the API key, I entered the username and password from my dashboard help scout, I had to enter the api key for my documentation :)

Thanks a lot for your help :)

You're trying to make an AJAX request to another domain which is prohibited by JavaScript for security/privacy reasons.If docsapi.helpscout.net returned a certain HTTP header in their response then it would work. The answer on this Stackoverflow question provides a good explanation about how CORS works https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work

One workaround would be to make an AJAX request to your own server passing the URL you want to query and then let your server make the request and return the response back to your page. This gets around the cross-site origin issue but it is a little more complicated.

  • I suggest rereading the answer you linked to, it seems to indicate you are not going to get the correct response header unless you ask for it in the request. – majick Mar 11 '16 at 4:41

Have you tried adding the header that it is mentioning. Even though it is a CORS request as @kingkool68 is pointing out, it seems like you are only going to get the needed response if you send the needed header with the request. Try adding it this way:

headers: {
    'Access-Control-Allow-Origin': '<?php echo home_url(); ?>',
    'Authorization': 'Basic <?php echo base64_encode( 'username:password' ); ?>'
},

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.