Why is the form not being submitted via Ajax?

Question

htaccess

I use this code to process the form on submission:

<script>
            jQuery("form").submit(function() {
                        var form_data = jQuery(this).serialize();
                        jQuery.ajax({
                                type: "POST",
                                url: "/form1.php",
                                data: form_data,
                                success: function(data) {
                                    alert("Accepted. We will contact you within 1 hour!");
                                }
                        });
                    return false;
            });
        </script>

However, when trying to submit the form, an error appears in the console:

Mixed Content: The page at ' https://site.ru/ ' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ' site.ru:443 '. This request has been blocked; the content must be served over HTTPS.

This error disappears if you remove htaccess:

RewriteEngine On

RewriteCond %{ENV:REDIRECT_STATUS} ^$
RewriteCond %{REQUEST_URI} !^/robots\.txt
RewriteRule !(^$|.*\.(css|jpg|gif|ico|png)) / [R=301 ,L]

RewriteCond %{QUERY_STRING} ^(.+) [NC]
RewriteRule ^(.*)$ /$1? [R=301,L]

RewriteCond %{HTTP_HOST} ^www\.(.*) [NC]
RewriteRule ^(.*)$ https://%1/$1 [R=301,L]

But I need this htaccess.
How to rewrite it so that it allows submitting forms via ajax?

Answer 1

RewriteRule !(^$|.*\.(css|jpg|gif|ico|png)) / [R=301,L]

This rule redirects to the main page everything except images and styles, so the request /form1.phpwill be processed by this rule.
You can add an exception for a file Or for any POST requestsRewriteCond %{REQUEST_URI} !^/form1\.php
RewriteCond %{REQUEST_METHOD} !POST