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

实现方式：使用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. python 浅析对return的理解

    最近很忙,但是还是很认真的学习python这个东西,不是出于什么目的,只是单纯的喜欢罢了.最近学习的东西比较简单,但是也遇到了一些问题,就是比较迷惑人的问题,今天小编就在这里讲讲自己的对return的 ...

  2. Netty4 学习笔记之一:客户端与服务端通信 demo

    前言 因为以前在项目中使用过Mina框架,感受到了该框架的强大之处.于是在业余时间也学习了一下Netty.因为Netty的主要版本是Netty3和Netty4(Netty5已经被取消了),所以我就直接 ...

  3. Opengl4.5 中文手册—C

    索引 A      B    C      D     E     F     G H      I    J      K     L     M     N O      P    Q      ...

  4. return及break区别

    一.break 语句 中止当前循环,switch 语句或 label 语句,并把程序控制流转到紧接着被中止语句后面的语句. 示例 下面的函数里有个 break 语句,当 i 为 3 时,会中止 whi ...

  5. Android方法数不能超过65535

    为什么方法数不能超过65535?搬上Dalvik工程师在SF上的回答,因为在Dalvik指令集里,调用方法的invoke-kind指令中,method reference index只给了16bits ...

  6. hdu 2609 How many 最小表示法

    How many Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  7. jdk8与jdk9的共存

    以前安装JDK,需要手动配置环境变量.JDK8多了自动配置环境变量,所以可以不用手动配置. 如果我已经装了JDK8,还想再装一个JDK9,安装完,自动配置的环境变量会指向JDK9版本. 解决方法 删除 ...

  8. zoj3204 connect them 最小生成树 暴力

    Connect them Time Limit: 1 Second      Memory Limit:32768 KB You have n computers numbered from 1 to ...

  9. Java web 入门知识 及HTTP协议详解

     Java  web  入门知识 及HTTP协议详解 WEB入门 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资 ...

  10. WPF之DataGrid应用

    前几天打算尝试下DataGrid的用法,起初以为应该很简单,可后来被各种使用方法和功能实现所折磨.网络上的解决方法太多,但也太杂.没法子,我只好硬着头皮阅览各种文献资料,然后不断的去尝试,总算小有成果 ...