CODEWITHSUNDEEP
jqueryajaxsslhttps
svenkapudija
svenkapudija

Reputation: 5166

jQuery AJAX on HTTPS - Resource failed to load

I have own API at http(s)://www.api.domain.com (on HTTPS there is RapidSSL installed).

If I acccess that URL via browser I get

{"error":{"code":404,"message":"Invalid API version."}}

which is fine.

If I access https://www.api.domain.com/v1/auth I get

{"error":{"code":404,"message":"Missing authorization header."}}

which is also OK (sign that API works OK on SSL).

I have jQuery AJAX call to that API from other domain. If I make a call without SSL (http://www.api.domain.com/v1/auth) everything is working OK (I'm sending authorization headers and all other necessary stuff) and I'm getting responses. If I try to access to the same thing but with SSL (https://www.api.domain.com/v1/auth) I get OPTIONS https://www.api.domain.com/v1/auth Resource failed to load.

Also, CORS is working. On PHP side I have

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: Authorization, x-domain-accesskey, X-Requested-With');
    exit;
}

so it's working, but only without SSL. In chrome I see one OPTIONS request and then GET/POST/whatever I requested. It's working just fine.

But when I try to move on HTTPS,

Resource failed to load

On Network tab I have only this (not sure why on the first image is showing OPTIONS, but on the details POST)

enter image description here

enter image description here

enter image description here

and then just...stops? In jQuery it stops on line

xhr.send( ( s.hasContent && s.data ) || null );

$.ajax is normal (don't have crossDomain: true, dataType: jsonp or something else).

Ideas?

Upvotes: 3

Views: 10359

Answers (2)

edindubai
edindubai

Reputation: 161

I had a very similar error in chrome console to the line where it stopped, as well as lots of 404 (admin-ajax.php not found) and some 500 errors when in wordpress admin. 

g.send(b.hasContent && b.data || null)

Reading @Rooster's solution made me think about htaccess for my https SSL cert site which was still the default wordpress file. By adding this above it:

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]

The "code forces a request to http://example.com to load https://example.com. It also forces directly linked resources (images, css, etc.) to use https"

see:- https://help.dreamhost.com/hc/en-us/articles/215747758-Force-your-site-to-load-securely-with-an-htaccess-file.

So in the end your file should look like the below:

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE] 

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Hope that helps, solved some of my errors.

Upvotes: 0

Rooster
Rooster

Reputation: 10077

make the page youre sending the https ajax request from render in https and it should work fine for you.

Upvotes: 2

Related Questions