XMLHttpRequest cannot load “ …No 'Access-Control-Allow-Origin' header is present on the requested resource.” — Jquery

Question

I have being having issue with this request recently .And what baffles me most is the fact that the issue doesn't occur on localhost until I deploy to my machine. I was then forced to change my code to support cross domain requests, as suggested Here .

Before it was

 $.get('//js.mysite.com/javascript.php', options, function(xml) {
                $(xml).find('item').each(function(idx) {
                .....
             },
            'xml'
        );

Now I changed to

 $.ajax({
            type : 'GET',
            url : '//js.mysite.com/javascript.php/',
            data : options,
            dataType : 'xml',
            success : function(xml) {
           .....

             },
            jsonp: 'jsonp'
        });

Both work fine on my local machine. However they fail on my dev machine. When I check under the network on my dev browser, and check through the request header, I realized that the request URL on the hosted site is returned as

Request Url https://js.mysite.com/javascript.php?prefix=prefix&media=2&campaign=15&mode=txt

and my local machine

 Requst Url http://js.mysite.com/javascript.php?prefix=prefix&media=2&campaign=15&mode=txt

When I changed the https to http from the link return by the hosted site, it works fine . My question is where does the https comes from ? How do I change my code to support such changes considering it returns https on my hosting site and http on the local. The hosted site returns 404 error with the error message xmlhttprequest cannot load no 'access-control-allow-origin' header is present on the requested .

Any help, suggestion or better explanation would highly be appreciated.

Answer 1

1. CORS requiers scheme to be set as well as domain. So you need to check that https://js.mysite.com is added to CORS-allowed section of your server (or use wildcard "*")
2. You use default schema ("//") and it suits majour cases. Changing it to http will couse secuirity issues: most browsers would block http requests from https site. So you have two options: to change site you are requesting from to http, or allow CORS requests to https://js.mysite ... (check that ssl exists and works there first of all)

Answer 2

The HTTPS comes from whatever protocol the webpage is being served on. ie if your remote server is forcing an SSL connection it's going to use HTTPS .

This is because the // on your url : '//js.mysite.com/javascript.php/', tells your client to use the protocol of the webpage that is currently making the request.

edit: My guess is that your remote server isn't supporting the HTTPS requests. You may to enable SSL, or simply use HTTP on your app.