Skip Navigation

[Resolved] AJAX sorting/filtering doesn't work on Google Chrome

This thread is resolved. Here is a description of the problem and solution.

Problem:

I'm using a view with AJAX sorting and filtering, along with the "Show only filter options that would produce results" feature. It works perfectly in Safari but not in Chrome, where it endlessly loads. Disabling AJAX and the filter option resolves the issue in Chrome.

Solution:

The issue is related to a CORS error that occurs when accessing the site without the "www" prefix in the URL. The AJAX request is blocked because it is treated as a cross-origin request. To resolve this, you need to configure your server to include the Access-Control-Allow-Origin header for the admin-ajax.php file. This can be done by modifying your server's configuration:

1. For Apache:
Add the following to your .htaccess file:

<ifmodule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://mlpt.com"
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type"
</ifmodule>

2. For Nginx:
Add the following to your server block configuration:

location /wp-admin/admin-ajax.php {
    add_header 'Access-Control-Allow-Origin' 'https://mlpt.com';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type';
}

3. In WordPress (PHP):
Alternatively, add this to your theme’s functions.php or a custom plugin:

function add_cors_http_header() {
    header("Access-Control-Allow-Origin: https://mlpt.com");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
    header("Access-Control-Allow-Headers: Content-Type");
}
add_action('init', 'add_cors_http_header');

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 7 replies, has 2 voices.

Last updated by Christopher Amirian 3 months, 2 weeks ago.

Assisted by: Christopher Amirian.

Author
Posts
#2709857

I'm using a view with AJAX sorting and filtering, as well as "Show only filter options that would produce results". It works perfectly in Safari, but it doesn't work in Chrome (it endlessly loads). When I turn off AJAX and "Show only filter options that would produce results" it works as expected in Chrome.

#2710252

Christopher Amirian
Supporter

Languages: English (English )

Hi there,

Would you please provide the URL of the page so I can test on my Chrome browser and see if there is any sort of Javascript error happening?

If there is a need for login to see the page, I'd appreciate it if you could give me the URL/User/Pass of your WordPress dashboard after you make sure that you have a backup of your website.
It is absolutely important that you give us a guarantee that you have a backup so if something happens you will have a point of restore.

Make sure you set the next reply as private.

Thanks.

#2710912

I cannot give you login access, but here is the url of the page in question. It works perfectly in Safari but AJAX breaks in Chrome.

hidden link

#2711124

Christopher Amirian
Supporter

Languages: English (English )

Hi there,

Thank you for the URL. I checked and this seems to be working properly on my Chrome browser.

I created a video:

hidden link

I'd appreciate it if you check with another machine or latest version fo the Chrome browser.

Thanks.

#2711411

So after some more in-depth investigation, it seems this error is being caused by potentially an interaction between the browser, DNS protocols, as well as how WordPress and Toolset interact. It's a super weird bug so I don't know if it's really something that can be solved easily.

From what I understand, if you go to hidden link it will work in Safari but not in Chrome. But if you go to hidden link it will work as expected in both. It seems that something to do with the missing "www" causing AJAX not to work correctly in Chrome only (Safari successfully redirects to the www regardless of the input). The page still renders correctly and is showing the correct page, but just the AJAX seems not to work. Perhaps there is something in WordPress or Toolset were an explicit url variable is used that no longer meets the requirements when the www is missing? Or perhaps WordPress is handling the redirect incorrectly or interfering with our hosting DNS settings? No idea why this would be, or even why the redirect isn't directing to the www version as the DNS is supposed to, and it seems that works in basically all other pages. Super strange error, not sure what to make of it.

I imagine most plausible causes of these errors you wouldn't be able to help with, but can you investigate whether Toolset's interaction with the url in sorting could have any effect on the error, or at least be caused by whatever is creating the redirect error?

#2711581

Christopher Amirian
Supporter

Languages: English (English )

Hi there,

Thank you for the info. I see the error when the non-www version is used and here it is:

Access to XMLHttpRequest at '<em><u>hidden link</u></em>' from origin '<em><u>hidden link</u></em>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This indicates that Ajax code wants to get called from "hidden link" which is considered an external source when you access the page from non-www version.

To resolve this issue, you need to configure your server to include the Access-Control-Allow-Origin header in its response for the admin-ajax.php file. Here’s how you can do that:

1. Modify .htaccess (Apache)

If you are using Apache, you can add the following lines to your .htaccess file in the root directory of your WordPress installation:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "<em><u>hidden link</u></em>"
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type"
</IfModule>

2. Modify Nginx Configuration

If you are using Nginx, you can add the following lines to your server block configuration:

location /wp-admin/admin-ajax.php {
    add_header 'Access-Control-Allow-Origin' '<em><u>hidden link</u></em>';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type';
}

3. Add Headers in WordPress (PHP)

You can also add headers directly in WordPress by editing your theme’s functions.php file or creating a custom plugin:

function add_cors_http_header() {
    header("Access-Control-Allow-Origin: <em><u>hidden link</u></em>");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
    header("Access-Control-Allow-Headers: Content-Type");
}
add_action('init', 'add_cors_http_header');

See if it works for you. But please consult with a network expert on this.

Thanks.

#2711676

Thank you so much! I didn't even think about a CORS error but that makes perfect sense. I will pass this info to our network manager.

#2711747

Christopher Amirian
Supporter

Languages: English (English )

Awesome! We are happy to be able to help.