如何使用 jQuery 加载跨域 html答案

【问题标题】：How to load cross domain html using jQuery如何使用 jQuery 加载跨域 html
【发布时间】：2015-06-04 07:54:33
【问题描述】：

我有 2 个不同的 java web 项目在 2 个不同的 tomcat 服务器上运行。让我们说 projA 和 projB 在这里，我试图从 projA 加载 projB 中可用的 html。我只是使用 jQuery.load() 来实现这一点。但它给了我 No 'Access-Control-Allow-Origin' header is present on the requested resource error。我也尝试在这里使用 jquery 跨域插件可用https://github.com/padolsey-archive/jquery.fn/tree/master/cross-domain-ajax

但这行不通。任何帮助将不胜感激。

我正在尝试的代码

$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');
    }
});

【问题讨论】：

你尝试过jsonp请求吗？
基本上我没有调用任何后端 API。它只是一个位于不同域的加载 HTML。
它是浏览器的一项安全功能。您可以在 projA 上调用一个函数，然后使用 CURL 或任何其他服务器端方法从那里调用 projB。
$("#result").load("www.google.com");这行得通吗？
@KNeerajLal 是的，它确实有效，但不适用于我的本地主机:(

标签： jquery html load cross-domain

【解决方案1】：

您可能希望使用代理服务器来请求它。

我找到了Here 并制作了这个小提琴-http://jsfiddle.net/2kn52u3s/1

code sn-p-

设置 ajax 标头-

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

然后请求一个跨域的JSON Request as-

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

【讨论】：

嗨 manoz，我刚刚尝试了那个小提琴，在那里我用我的 URL 替换了 encodeURIComponent('google.com')，如下所示 encodeURIComponent('localhost:8080/OtherDomain') 但它不会在 div 中显示内容
是的，它确实适用于 facebook 等实时域但是如果我想在 localhost 显示 html 怎么办
@user3300140，基本上这会将 url 编码为 utf-8 格式，因此标头设置为相同的编码，因此浏览器将允许请求编码的 url。如果你在本地机器上尝试，我想应该不会有任何跨域错误？
stackoverflow.com/questions/3506208/… 这可能会有所帮助
@user3300140，请在问题中输入您的代码。

【解决方案2】：

所以这是我得到的 CORS 错误的答案：

我在 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>

然后有一个自定义过滤器写入设置标题：

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);
    }

【讨论】：