jQuery Ajax跨域问题简易解决方案
场景：由于业务需求，需要在一个页面显示另外一个页面，并且右键查看源代码看不到一条链接。
实现方式：使用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跨域问题简易解决方案的更多相关文章
- JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案
JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案 最近在开发WSS RESTful服务的时候, 碰到了这些个纠 ...
- 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 ...
- ajax 跨域访问的解决方案
ajax 跨域访问的解决方案 一.什么是跨域: 1.什么样的请求属于跨域: 域名,端口有任何一个不相同都属于跨域: 二.跨域的常用几种解决方案: 1.jsonp: 2.iframe: 3.webcon ...
- NodeJ node.js Jquery Ajax 跨域请求
Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...
- 关于JQuery Ajax 跨域 访问.net WebService
关于这个 jQuery Ajax跨域访问 WebService 前天整了好几个小时没整明白 今天再看一下 结果突然就顿悟了 1.建一个空webApplication --添加--新建项--web服务( ...
- PHP Ajax 跨域问题最佳解决方案 【摘自菜鸟教程】
PHP Ajax 跨域问题最佳解决方案 分类 编程技术 http://www.runoob.com/w3cnote/php-ajax-cross-border.html 本文通过设置Access-Co ...
- [转载]JQuery的Ajax跨域请求的解决方案
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuer ...
- Ajax跨域问题及解决方案
目录 复现Ajax跨域问题 Ajax跨域介绍 Ajax跨域解决方案 一. 在服务端添加响应头Access-Control-Allow-Origin 二. 使用JSONP解决 小结 复现Ajax跨域问题 ...
- jquery ajax跨域请求详解
本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的jquery.ajax jsonp格式和jque ...
随机推荐
- JAVA课程设计-计算器（201521123028 李家俊）
1.团队课程设计博客链接 http://www.cnblogs.com/DevilRay/p/7064482.html 2.个人负责模板或任务说明 主要负责计算器图形界面 包括操作按钮,菜单项以及输出 ...
- Bitbucket 触发内网 Jenkins Build
为了保证安全性多数的持续集成系统都会部署在公司内部的局域网中,这样如果代码部署在 Bitbucket 等环境中就只能通过轮询的方式来触发 Build.那么有没有办法通过 Bitbucket 的 Web ...
- MySQL集群（一）之主从复制
前面学完了JDBC,接下来带大家感受一下MySQL集群!其实什么是MySQL集群?简单的说就是一群机器(服务器)的集合,它们连在一起来工作. 其实各种数据库都有自己的集群,常常的多: 我们要学习的就是 ...
- 在腾讯云上搭建WordPress博客
笔者一直很羡慕那些搭建了个人博客的大牛,在最近工作之余也尝试着搭建了自己的博客,历时1周,这篇文章就将踩过的坑记录下来,先看下成果,链接在此 1- 购买腾讯云主机 腾讯云官网,我选了79元/月的最便宜 ...
- python之socket编程------粘包
一.粘包 什么是粘包 只有TCP只有粘包现象,UDP永远不会粘包 所谓粘包问题主要还是因为接收方不知道之间的界限,不知道一次性提取多少字节的数据所造成的 两种情况发生粘包: 1.发送端需要等缓冲区满才 ...
- [06] Java的数据类型
1.基本数据类型 1.1 基本数据类型 byte.chart.short.int.long.float.double.boolean 共8种数据类型为基本数据类型: 数据类型 位数 取 ...
- Eclipse读取含有extjs的项目文件时卡死或者编写ExtJS时卡
新建一个Eclipse或MyEclipse项目时,关掉验证. 项目右键-->Properties-->Builders--> 不勾选(JavaScript Validator.Val ...
- linux中文乱码
txt文件在linux环境下打开呈现了乱码状态. 解决方法1:在linux用iconv命令,如乱码文件名为zhongwen.txt,那么在终端输入如下命令: iconv -f gbk -t utf8 ...
- vue组件初学--弹射小球
1. 定义每个弹射的小球组件( ocicle ) 2. 组件message自定义属性存放小球初始信息(可修改) { top: "0px", //小球距离上方坐标 left: &qu ...
- Codeforces 845 C. Two TVs 思路：简单贪心算法
题目: 题目原文链接:http://codeforces.com/contest/845/problem/C 题意:现在我们有一个电视清单,有两个电视,电视清单上有每一个节目的开始时间和结束时间. 电 ...