GET subdomain html page with jquery

Question

I have the following situation.

From an application located in https://subdomain.mydomain.com I am trying to get the html of a page located in https://mydomain.com/page.aspx

I'm doing this with the jquery $.ajax method.

    $.ajax({
        url: url,
        type: 'GET',
        contentType: 'application/x-www-form-urlencoded',
        success: function (data, status, xhr) {
            console.info("success");
        },
        error: function (xhr, status, error) {
            console.error(error);
        }
    });

The aspx page is actually called and executed.

IE (through XDomainRequest) and Firefox have the same behavior: from the inspectors (IE dev tools and Firebug) I see that the response status is 200 OK and it has the expected size (80KB) but the response content is empty. The jQuery error is not so useful:

    readyState: 0,  
    responseText: ""
    status: 0,
    statusText: "error"

I guess it's something involving the Same Origin Policy. I see people solving this kind of issues with YQL (but i don't want to use additional libraries) and JSONP (but I'm working with plain HTML).

In a moment of desperation I have tried also tricks like

    document.domain = 'mydomain.com';
    jQuery.support.cors = true;

No success. Any tip?

The problem was due to the Access-Control-Allow-Origin that must be enabled on the called application. In my case, it was an asp.net application in IIS7 hosting. I had to add these lines in the web.config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

The following website reports many configuration to enable CORS on many server types

lazyhammer · Accepted Answer · 2012-04-24 17:42:25Z

3

In order to use IE's or FF's cross-origin requests you need to tune up your server side to send Access-Control-Allow-Origin header with the response. And if you want to use document.domain it must be set not only at the requesting side, but in the response too. So you can use iframe to send such a request or use SCRIPT or JSONP since they have no cross-origin limitations.

answered Apr 24, 2012 at 17:42

lazyhammer

1,2281 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ab_732 Over a year ago

That worked! I just had to add to right server configuration. This link helped me a lot enable-cors.org Thank you for your help!

honyovk · Accepted Answer · 2012-04-24 17:32:37Z

1

Use JSONP to get the data

function myFunc() {
    console.info("success");
}

$.ajax({
    url: url,
    'dataType': "jsonp",
    'jsonp': "callback",
    'jsonpCallback': "myFunc"
});

The problem is that you are trying to make an XHR request from another domain, which is not allowed. You told jQuery to allow CORS, but JSONP is a better way to do this. You will need to set your server-side code to return the html in JSON data wrapped in a function to be called when the URL is loaded.

answered Apr 24, 2012 at 17:32

honyovk

2,73720 silver badges26 bronze badges

2 Comments

ab_732 Over a year ago

I'll consider this options when I have to face an existing JSON service. Thank you for your help!

honyovk Over a year ago

That is very understandable. I recently had a project with a very similar problem. I set up my server-side code to listen for the ?callback=xxx query string and return all of the HTML in a JSON variable instead of a plain HTML response. I guess I should have mentioned that in my answer.

Muhammad Mohsin Muneer · Accepted Answer · 2016-06-03 12:51:26Z

0

As simple javascript will suffice

alert(document.domain);

console.log("Output;");  
console.log(location.hostname);
console.log(document.domain);
alert(window.location.hostname)

console.log("document.URL : "+document.URL);
console.log("document.location.href : "+document.location.href);
console.log("document.location.origin : "+document.location.origin);
console.log("document.location.hostname : "+document.location.hostname);
console.log("document.location.host : "+document.location.host);
console.log("document.location.pathname : "+document.location.pathname);

answered Jun 3, 2016 at 12:51

Muhammad Mohsin Muneer

4335 silver badges14 bronze badges

Collectives™ on Stack Overflow

GET subdomain html page with jquery

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related