场景：由于业务需求，需要在一个页面显示另外一个页面，并且右键查看源代码看不到一条链接。

实现方式：使用iframe来显示这个首页，至于首页的地址则使用jQuery Ajax来获取。html代码如下：

<html>

<head>

<title></title>

<script src=""https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"" type=""text/javascript""></script>

<style type=""text/css"">

    body { overflow-x:hidden; overflow-y:hidden;}

    html, body, iframe { width:100%; height:100%; margin:0px; padding:0px;}

</style>

<script type=""text/javascript"">

    $(function(){

          $.ajax({

            url: """ + iisUrl + @"/Ajax/SnapsHijackService.ashx"",

            type: 'POST',

            dataType: 'json',

            data:{ releaseId: " + releaseId + @" },

            success: function(data) {

                var url = $.trim(decodeURIComponent(data.url));

                $(""#iframe"").attr(""src"",url);

            },

            error:function(data){

                alert(data);

                console.log(data.url);

            }

         });

    });

</script>

</head>

<body>

<iframe id=""iframe"" frameborder='no'></iframe>

</body>

</html>

SnapsHijackService.ashx代码如下：

string sql = "select user_site_url from t_synth_release_site where id = " + releaseId;

string url = string.Empty;

System.Data.DataTable dtUrl = NetWin.SnapsHijack.Common.Helper.MysqlHelper.Select(sql);

if (dtUrl == null || dtUrl.Rows.Count == )

{

    log.Write("读取广告计划：" + releaseId + "的官网代码失败。sql：" + sql);

    return;

}

url = dtUrl.Rows[]["user_site_url"].ToString().ToLower();

if (!url.StartsWith("http"))

{

    url = "http://" + url;

    log.Write("广告计划网址：" + url);

}

string result = "{\"url\":\"" + UrlEncode(url) + "\"}";

context.Response.Write(result);

context.Response.End();

出现的问题：由于业务需求，需要在别的站点通过反向代理的方式来请求这个一般处理程序，如此就会因为js的同源策略导致获取url失败。

解决方案一：只需要在一般处理程序那里添加一句话即可解决问题。此法在IE9中无效。在FireFox、Chrome中可行。

...

string result = "{\"url\":\"" + UrlEncode(url) + "\"}";

context.Response.AddHeader("Access-Control-Allow-Origin", "*");

context.Response.Write(result);

context.Response.End();

解决方案二：修改ajax的返回类型。具体看代码：

<html>

<head>

<title></title>

<script src=""https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"" type=""text/javascript""></script>

<style type=""text/css"">

    body { overflow-x:hidden; overflow-y:hidden;}

    html, body, iframe { width:100%; height:100%; margin:0px; padding:0px;}

</style>

<script type=""text/javascript"">

    $(function(){

          $.ajax({

            url: """ + iisUrl + @"/Ajax/SnapsHijackService.ashx"",

            type: 'get',//jsonp方式不支持POST方式跨域请求，就算指定成POST方式，会自动转为GET方式；而后端如果设置成POST方式了，那就请求不了了。

           dataType: ""jsonp"",//指定服务器返回的数据类型

           jsonp: ""callbackparam"",//指定参数名称

           jsonpCallback:""jsonpCallback1"",//指定回调函数名称

            data:{ releaseId: " + releaseId + @" },

            success: function(data) {

                var url = $.trim(decodeURIComponent(data[0].url));

                $(""#iframe"").attr(""src"",url);

            },

            error:function(data){

                alert(""error"");

            }

         });

    });

</script>

</head>

<body>

<iframe id=""iframe"" frameborder='no'></iframe>

</body>

</html>

一般处理程序：

string sql = "select user_site_url from t_synth_release_site where id = " + releaseId;

string url = string.Empty;

System.Data.DataTable dtUrl = Common.Helper.MysqlHelper.Select(sql);

if (dtUrl == null || dtUrl.Rows.Count == )

{

    log.Write("读取广告计划：" + releaseId + "的官网代码失败。sql：" + sql);

    return;

}

url = dtUrl.Rows[]["user_site_url"].ToString().ToLower();

if (!url.StartsWith("http"))

{

    url = "http://" + url;

    log.Write("广告计划网址：" + url);

}

string callbackFunName = context.Request["callbackparam"];

string result = callbackFunName + "([{\"url\":\"" + UrlEncode(url) + "\"}])";

//context.Response.AddHeader("Access-Control-Allow-Origin", "*");

context.Response.Write(result);

context.Response.End();

如此，IE、FireFox、Chrome就都可以了。ajax请求的链接为：http://wuzhoumh.paiming.net/Ajax/SnapsHijackService.ashx?callbackparam=jsonpCallback1&releaseId=988&_=1487146317414

参考文档：http://www.cnblogs.com/mahatmasmile/archive/2013/03/29/2989505.html

jQuery Ajax跨域问题简易解决方案的更多相关文章

  1. JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案

    JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案 最近在开发WSS RESTful服务的时候, 碰到了这些个纠 ...

  2. Ajax跨域问题及解决方案 asp.net core 系列之允许跨越访问(Enable Cross-Origin Requests:CORS) c#中的Cache缓存技术 C#中的Cookie C#串口扫描枪的简单实现 c#Socket服务器与客户端的开发(2)

    Ajax跨域问题及解决方案   目录 复现Ajax跨域问题 Ajax跨域介绍 Ajax跨域解决方案 一. 在服务端添加响应头Access-Control-Allow-Origin 二. 使用JSONP ...

  3. ajax 跨域访问的解决方案

    ajax 跨域访问的解决方案 一.什么是跨域: 1.什么样的请求属于跨域: 域名,端口有任何一个不相同都属于跨域: 二.跨域的常用几种解决方案: 1.jsonp: 2.iframe: 3.webcon ...

  4. NodeJ node.js Jquery Ajax 跨域请求

    Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...

  5. 关于JQuery Ajax 跨域 访问.net WebService

    关于这个 jQuery Ajax跨域访问 WebService 前天整了好几个小时没整明白 今天再看一下 结果突然就顿悟了 1.建一个空webApplication --添加--新建项--web服务( ...

  6. PHP Ajax 跨域问题最佳解决方案 【摘自菜鸟教程】

    PHP Ajax 跨域问题最佳解决方案 分类 编程技术 http://www.runoob.com/w3cnote/php-ajax-cross-border.html 本文通过设置Access-Co ...

  7. [转载]JQuery的Ajax跨域请求的解决方案

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuer ...

  8. Ajax跨域问题及解决方案

    目录 复现Ajax跨域问题 Ajax跨域介绍 Ajax跨域解决方案 一. 在服务端添加响应头Access-Control-Allow-Origin 二. 使用JSONP解决 小结 复现Ajax跨域问题 ...

  9. jquery ajax跨域请求详解

    本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的jquery.ajax jsonp格式和jque ...

随机推荐

  1. 201521123035《Java程序设计》第十周实验总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...

  2. PKI信息安全知识点详细解答包含HTTPS

    1. 什么是X.509? X.509标准是ITU-T设计的PKI标准,他是为了解决X.500目录中的身份鉴别和访问控制问题设计的. 2. 数字证书 数字证书的意义在于回答公钥属于谁的问题,以帮助用户安 ...

  3. 在java中使用MongoDB数据库

    Java 安装 要想在 Java 程序中使用 MongoDB,需要先确定是否安装了 MongoDB JDBC 驱动,并且要在机器上安装了 Java.查看 Java 教程来确保在机器上安装好 Java. ...

  4. 将Editplus添加到右键打开菜单

    因为自己一直用Editplus作为文本打开工具,新的电脑将压缩文件复制了过来,但是没有右键打开了. 第一打开注册表 在命令框中输入regedit 第二在注册表中输入选项 如下图所示在下拉菜单中新建Ed ...

  5. StringBuffer类的构造方法

    public StringBuffer():无参构造方法 public StringBuffer(int capacity):指定容量的字符串缓冲区对象(默认是16个字符) public String ...

  6. MVC查询数据接收及校验

    本来想写一篇aspx的TreeView控件绑值的文章的,在写案例的时候,写了一半,发现有些地方还得考虑以下,就留待下次了. 这一篇的话,是最近在开发一个项目的时候,有大量的页面和数据表,需要花式查询, ...

  7. 翻译 | 一行 JavaScript 代码的逆向工程

    原文地址:Reverse Engineering One Line of JavaScript 原文作者:Alex Kras 译者:李波 校对者:冬青.小萝卜 几个月前,我看到一个邮件问:有没有人可以 ...

  8. tomcat部署在centos6.8上的乱码问题

    web访问经常会莫名其妙的出现各种乱码问题.按照我自己的理解,设置一个charSet的过滤器,代码如下:import java.io.IOException; import javax.servlet ...

  9. Spark sql ---JSON

    介绍Spark SQL的JSON支持,这是我们在Databricks中开发的一个功能,可以在Spark中更容易查询和创建JSON数据.随着网络和移动应用程序的普及,JSON已经成为Web服务API以及 ...

  10. 非对称加密RSA的C#实现

    1.对称加密算法 对称加密是最快速.最简单的一种加密方式,加密(encryption)与解密(decryption)用的是同样的密钥(secret key). 对称加密有很多种算法,由于它效率很高,所 ...