0

This script works well on standalone site:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){  
    jQuery.ajax({
             url: 'xxx',
             success: function(data, textStatus, jqXHR ) {
                 alert(jqXHR.responseText);
             },
             error: function(jqxhr, status, exception) {
                 alert('Exception:', exception);
             }
         })
});
</script>

However when I try to use it on WordPress page it returns me an empty exception. What can be causing this behavior and how I can debug this?

(I added the lines below in functions.php)

function include_jquery() {

    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array(), null, true);

}
add_action('wp_enqueue_scripts', 'include_jquery');

One important remark is that js window.onload stopped working on my WordPress a few days ago and I started using jQuery(document).ready. I don't know why, maybe someone made some changes that I'm not aware of.

Improve this question
4
  • 1
    Trying to use jQuery 3.X could be breaking another plugin or your theme because it’s expecting the bundled version of jQuery. Why are you trying to load your own version?
    – Jacob Peattie
    Jul 15, 2018 at 15:12
  • I was trying different things to fix it. Without my own version (after removing include_jquery()) it works the same - empty exception
    – sswwqqaa
    Jul 15, 2018 at 15:18
  • Why do you deregister WP’s jquey? And what is the URL you use in ajax call (‘xxx’)?
    – Krzysiek Dróżdż ♦
    Jul 15, 2018 at 15:48
  • It's api hosted on other server. I thought the problem was on my side because I was doing changes on my website. But It seems that it is a problem of missing <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> in .htaccess
    – sswwqqaa
    Jul 15, 2018 at 16:17

1 Answer 1

Reset to default
-1

As I said in the comments. The problem was on api side.

Error: (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

How to solve: Add this to .htaccess of api

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin: myUrl
</IfModule>
Improve this answer
4
  • unlimited access from any source to any end point === horrible security.
    – Mark Kaplun
    Jul 15, 2018 at 17:39
  • How can I do it better if I want to exchange data between two sites? and why it is that bad?
    – sswwqqaa
    Jul 15, 2018 at 17:40
  • you need to whitelist only the site(s) in question. CORS protects you from ajax based atacks, something like using the fact that you are already logged-in to site A to try to delete all content from it with ajax requests using the delete post wordpress ajax request. Limiting the sites that are allowed to do it even in theory is a must, better if you use the wp-json end points is to also remove CORS only for the very specific end point you need to use from the other site
    – Mark Kaplun
    Jul 15, 2018 at 18:02
  • Thanks for detailed explanation. I'll try to make it work the safer way.
    – sswwqqaa
    Jul 15, 2018 at 18:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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