How to load cross domain html using jQuery

Question

I have 2 different java web projects running on 2 different tomcat server. Lets say projA and projB Here I am trying to load html available in projB from projA. I am simply using jQuery.load() to achieve this.But it is giving me No 'Access-Control-Allow-Origin' header is present on the requested resource error. I also tried to use jquery cross domain plugin availabele here https://github.com/padolsey-archive/jquery.fn/tree/master/cross-domain-ajax

But this does not work out. Any help will be appreciated.

code i am trying

$191('.ontop').load("http://"+host+":8080/OtherDomain/",function(response,status) 
{

    if (status == "error") 
    {
        $191('.ontop').empty();
        var msg = "Sorry We could not connect to our server.. Please try again later.";
        alert(msg);
    }
    else
    {
        alert(status);
        $191('.ontop').css('display', 'block');
    }
});

basically i am not calling any backend API. Its just a loading HTML located at different domain. — mahendrakawde, Mar 31 '15 at 05:07
Its an security feature of browsers. You can call an function on your projA and then call projB from there using CURL or any other server side method. — valar morghulis, Mar 31 '15 at 05:17
response.setHeader("Access-Control-Allow-Origin", "*"); add this to your webpage. — K Neeraj Lal, Mar 31 '15 at 05:45

score 0 · Answer 1 · edited May 23 '17 at 10:28

0

You may want to use a proxy server to request it.

I found Here and made this fiddle- http://jsfiddle.net/2kn52u3s/1

code snippet-

setup ajax headers-

$.ajaxSetup({
    scriptCharset: "utf-8", //maybe "ISO-8859-1"
    contentType: "application/json; charset=utf-8"
});

And then request a cross domain JSON Request as-

$.getJSON('http://whateverorigin.org/get?url=' + 
    encodeURIComponent('http://google.com') + '&callback=?',
    function(data) {
      $("#target").html(data.contents);
});

edited May 23 '17 at 10:28

Community

1
1

answered Mar 31 '15 at 05:08

Manoz

6,507
13
68
114

Hi manoz, I just tried that fiddle and there i replaced encodeURIComponent('http://google.com') with my URL as below encodeURIComponent('localhost:8080/OtherDomain') but it does not display content in div – mahendrakawde Mar 31 '15 at 05:15
yes it does work with live domain such as facebook But what if i want to display html at localhost – mahendrakawde Mar 31 '15 at 05:19
@user3300140, Basically this encodes the url in utf-8 format and hence the header is set to the same encoding, So browser would allow request of encoded url(s). And if you are trying at local machine I guess there shouldn't be any cross domain error? – Manoz Mar 31 '15 at 05:19
1

http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain?rq=1 this might help – valar morghulis Mar 31 '15 at 05:23
@user3300140, Please put your code in the question. – Manoz Mar 31 '15 at 05:41
@Manoz code added , $191 is nothing but a jQuery substitute variable – mahendrakawde Mar 31 '15 at 05:51
@Manoz http://whateverorigin.org/get?url gives me service unavailable error. Error code 503 – mahendrakawde Mar 31 '15 at 06:52
@user3300140, Because you are passing blank parameters to it. Here is the url you all need to know about- http://www.whateverorigin.org/ – Manoz Mar 31 '15 at 06:56
$.getJSON('http://whateverorigin.org/get?url=' + encodeURIComponent('http://localhost:8080/OtherDomain/') + '&callback=?', function(data) { $("#target").html(data.contents); }); I used same snippet but it says service unavailable – mahendrakawde Mar 31 '15 at 07:02
@Manoz i just replaced www.google.com with localhost:8080/OtherDomain – mahendrakawde Mar 31 '15 at 07:03

score 0 · Accepted Answer · answered Apr 03 '15 at 08:00

So here is the answer for CORS error i am getting:

I added following filter in my web.xml

 <filter>   
      <filter-name>myResponseFilter</filter-name>
      <filter-class>com.filters.ResponseHeaderFilter</filter-class>
      <async-supported>true</async-supported>
    </filter>


    <filter-mapping>
        <filter-name>myResponseFilter</filter-name>     
        <url-pattern>*</url-pattern>
    </filter-mapping>

and then there is a custom Filter written to set headers:

public void doFilter(ServletRequest request, ServletResponse response,
            FilterChain filterChain) throws IOException, ServletException {

        HttpServletRequest httpRequest = (HttpServletRequest) request;
        HttpServletResponse httpResp = (HttpServletResponse) response;      

        String origin = httpRequest.getHeader("origin");
        origin = (origin == null) ? "*" : origin;

        httpResp.setHeader("Access-Control-Allow-Origin", origin);
        httpResp.setHeader("Access-Control-Allow-Methods", "GET, POST");
        httpResp.setHeader("Access-Control-Allow-Credentials", "true");
        httpResp.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
        httpResp.setHeader("Access-Control-Max-Age", "86400");

        filterChain.doFilter(request, response);
    }

How to load cross domain html using jQuery

2 Answers2

Linked