`
dengminhui
  • 浏览: 167284 次
  • 来自: ...
社区版块
存档分类
最新评论

如何解决跨域问题

阅读更多

跨域问题总是很难缠,很多时候开发人员都是不自觉间就遇到了跨域,在此晒晒我的解决之道。

 

1 避免跨域

在最近一个需求中,有一个网页会出现在两个域名下,开始完全没想到这个问题,导致跨域问题产生,出问题代码如下

 

 

<form id="form1" method="post" action="http://www.anotherDomain.com/a.htm?_input_charset=UTF-8">
       <input type="hidden" name="action" value="SomeAction"/>
       <input type="hidden" name="event_submit_do_something" value="true"/>
           ......
</form>

<script language="javascript">

myAjax = function(){
         myhandle = function (hr){
        		alert(hr.responseText);
				
        }
           YAHOO.util.Connect.asyncRequest(
					'POST',
					FD.common.getFormAction('form1'),
					{ 
					success : myhandle, 
					failure : myhandle, 
					timeout : 10000 
					}, 
					FD.common.formSerialize('form1') + '&param1='+document.getElementById('param1').value
	  );
}
</script>

 

修改方案很简单,采用相对路径

<form id="form1" method="post" action="?_input_charset=UTF-8">

 这是最简单的办法,因为本身都是一个页面。在公司框架中,这两种写法,程序最终执行的都是SomeAction中doSomething函数,但是程序发送的请求则有所不同,前者发送到了www.anotherDomain下,后者则在当前的域名下,所以跨域问题也就不存在了。

 

 

2 采用jsonp方式

如果你还没听过什么是jsonp,可以先看看http://baike.baidu.com/view/2131174.htm?fr=ala0_1

简单说来,就是采用json方式返回数据,和普通json不同的就是将地址写在script的src属性里欺骗浏览器

为了从另外一个域名下的test.html页面取得一个json数据

var ajaxResult={"count":1};
 

可以在页面的头部添加这样一句即可

 

<script src="http://www.anotherdomian.com/test.html?param1=$param1" type="text/javascript"></script>

其中的$param1是由服务器的程序生成,所以每次页面打开后其实$param1是不可变的。就是采用这种方式,页面打开后就可以直接使用ajaxResult这个js的变量了,

 

3 jsonp方式改进

前一种方法如果说还有什么不好的,那可能就是不够动态吧,下面对第2种方式进行改进。

在http://zhidao.baidu.com/ 未登录用户回答问题时会用iframe调用http://zhidao.baidu.com/userlogin.html
userlogin.html有下面的javascript

 

<SCRIPT LANGUAGE="JavaScript">
document.domain="baidu.com";
<!--
function G(id){if(typeof(id)=="string"){return document.getElementById(id);}return id;}
function showInfo(obj){
  if(obj.checked == true){
  G("memInfo").style.display="block";
  }else{
  G("memInfo").style.display="none";
  }
}
function request(id,url){
  oScript = document.getElementById(id);
  var head = document.getElementsByTagName("head").item(0);
  if (oScript) {
  head.removeChild(oScript);
  }
  oScript = document.createElement("script");
  oScript.setAttribute("src", url);
  oScript.setAttribute("id",id);
  oScript.setAttribute("type","text/javascript");
  oScript.setAttribute("language","javascript");
  head.appendChild(oScript);
  return oScript;
}
var loginTimer=null;
var loginState=-1;
var tryTime=0;
function PSP_ik(isOk){
  if(isOk==0){
  G("errorInfo").style.display="none";
  loginState=1;
  if(parent.loginSuccess){
  parent.Pop.hide();
  parent.loginSuccess();
  }
  }
  else
  {
  loginFalse();
  }
}

function loginFalse(){
  loginState=0;
  var err=G("errorInfo");
  err.innerHTML="用户名或密码错误,请重新登录";
  err.style.display="block";
  G("username").focus();
  tryTime++;
  if(tryTime>1){
  onLoginFailed();
  }
}
function onLoginFailed(){
  if(parent.onLoginFailed){
  parent.Pop.hide();
  parent.loginFailed();
  }else{
  document.login.u.value=escape("http://zhidao.baidu.com/q"+parent.location.search);
  doucment.login.submit();
  }
   
}
function loginTimeout(){
  if(loginState==-1){
  var err=G("errorInfo");
  err.innerHTML="操作超时,请重新登录";
  err.style.display="block";
  G("username").focus();
  }
}
function userLogin(){
  var username=G('username').value;
  var password=G('password').value;
  var memPassport=G('memPassport').checked?"on":"off";
  if(username.length<=0||password.length<=0){G("username").focus();return false;}
  var url = 'https://passport.baidu.com/?logt&tpl=ik&t=0&keyname=ik&mem_pass='+memPassport+'&username='+username + '&loginpass=' +escape(password)+ '&s=' + (new Date()).getTime();
  loginState=-1;
  var login=request("loginScript",url);
  loginTimer = setTimeout(loginTimeout, 5000);

}
window.onload=function(){
  document.loginForm.username.focus();  
  document.getElementById("username").focus(); 
}
//-->
</SCRIPT>
 

 

request方法处理异步请求使用动态往head中添加script而不是用xmlhttp发送get请求。妙就妙在这。我们知道调用javascript是没有域的限制的。当加载完成时一样会执行。

 

4 通过服务器绕过跨域

将原有的ajax请求,发送到本域名下后台程序,通过后台程序去取得另外一个域名下页面的内容,由于服务器程序不存在跨域的问题,当它得到数据后,再以ajax.responseText返回给原页面,则跨域也可得到解决。


 

参考文档:

http://baike.baidu.com/view/2131174.htm?fr=ala0_1

http://topic.csdn.net/u/20081224/09/26aff992-d0ba-4f6f-a023-e0e96ecbe1fc.html

 

 

3
2
分享到:
评论
2 楼 libmw 2010-05-16  
上个月腾讯面试我,问我JSONP是啥东西,我说没通过,结果直接就被鄙视了~楼主帖子咋不早发啊
1 楼 vb2005xu 2010-05-13  
_dataParser: function(data){ // 从对象生成查询格式的字符串
if (!xu.verify._obj(data)) return null;
var param_key = function(key,pkey){
if(!pkey)return key ;
return pkey + '[' + key + ']' ;
};
var obj2qparams = function(obj,pkey){
var qstr = '' ,pkey = pkey || null ;
for(var p in obj){
if (obj.hasOwnProperty(p) && xu.verify._str(p)){
if (xu.verify._obj(obj[p])){
qstr += obj2qparams(obj[p],param_key(p,pkey));
}else
qstr += param_key(p,pkey) + '=' + obj[p] + '&' ;
}
}
return qstr ;
};
// demo
// data['user'] = {name:'se',ps:123,role:{name:'admin',group:{name:'backup'}}};
return obj2qparams(data).replace(/&$/,'');
}

相关推荐

    window.name解决跨域问题的文档

    window.name 解决跨域问题的文档 window.name 传输技术是 Thomas Frank 发明的,旨在解决 cookie 的一些劣势,例如每个域名 4 x 20 Kb 的限制、数据只能是字符串、设置和获取 cookie 语法的复杂等等。后来,Kris ...

    nginx解决跨域问题的实例方法

    本篇文章将详细介绍如何利用Nginx解决跨域问题。 首先,了解跨域的基本概念。跨域是指由于浏览器的同源策略,JavaScript只能请求与当前页面同源(协议、域名和端口都相同)的资源。当尝试请求不同源的资源时,就会...

    使用docker部署nginx前后端解决跨域问题.docx

    使用docker部署nginx前后端解决跨域问题

    Tomcat配置解决跨域问题

    【标题】:“Tomcat配置解决跨域问题” 在Web开发中,跨域(Cross-Origin)是一种常见的安全限制,它阻止浏览器从一个源加载资源到另一个不同的源。这主要是为了防止恶意脚本通过注入来窃取数据。然而,在进行前后...

    解决跨域问题的jar资源文件.zip

    在这个“解决跨域问题的jar资源文件.zip”中,包含了两个关键的JAR文件:cors-filter-2.4.jar 和 java-property-utils-1.9.1.jar。这两个库是针对Java Web应用的,用于处理跨域请求。 `cors-filter-2.4.jar` 是一个...

    JSONP三种方式解决跨域问题

    1、地址http://a.test.com:8888/testAjaxCross/public/index.do 演示跨域问题以及跨子域名解决方法 2、地址...演示jsonp解决跨域问题的三种方案jsonp、$getJSON、$ajax等

    nginx安装, 解决跨域问题

    **Nginx安装与解决跨域问题** 在现代Web开发中,由于浏览器的同源策略,跨域问题经常出现,限制了不同源之间的通信。Nginx作为一个高性能的反向代理服务器,常被用于处理此类问题。本篇将详细介绍如何在Linux环境下...

    使用httpclient解决跨域问题

    我使用的是httpClient 进行内部转发 我们在A的服务器上,将前台的文件流,通过httpClient传输到B的服务器上(B的服务器通过控制层接受A传输的文件流,让后保存在B的服务器上。返回一个json结果)

    java cxf webservice接口解决跨域问题

    解决跨域问题的关键配置将在`web.xml`中进行。我们需要添加一个名为`CorsFilter`的过滤器,并设置其初始化参数。以下是一个示例配置: ```xml &lt;filter-name&gt;CorsFilter &lt;filter-class&gt;org.apache.cxf.transport....

    getJSON解决 跨域问题例子

    本篇将详细讲解如何使用getJSON来解决跨域问题,以及涉及到的相关技术点。 首先,我们要理解什么是跨域。跨域是指一个域下的文档或脚本尝试请求另一个域下的资源时,如果两个域不相同,就会触发跨域安全策略。例如...

    解决跨域问题方案实例

    在IT行业中,跨域问题是一个常见的挑战,...总之,解决跨域问题需要理解浏览器的同源策略,以及如何利用JSONP、CORS等技术进行规避。在Java环境下,可以利用Spring等框架的特性来配置跨域策略,确保前后端的顺利通信。

    doc解决跨域问题.pdf

    "doc解决跨域问题.pdf"文档中介绍的是如何在基于Koa的后端项目中处理这个问题。Koa是一个由Express.js作者创建的现代JavaScript Web框架,它提供了一种更简洁的方式来处理HTTP请求。 首先,项目初始化是必要的,这...

    CORS解决跨域问题(403问题)

    Tomcat lib目录下添加cors-filter-1.7.jar,java-property-utils-1.9.jar这两个jar包,项目中web.xml 中添加filter,以及出现OPTIONS 类型的请求并返回403的解决方案;压缩文件包含jar文件,以及web.xml配置。

    java服务器端解决跨域问题共6页.pdf.zip

    Java服务器端解决跨域问题是一项常见的任务,尤其是在开发Web应用时。跨域是由于浏览器的安全策略,即同源策略(Same-Origin Policy)所引起的。同源策略限制了来自不同源的HTTP请求,防止恶意网站通过JavaScript...

    前端解决跨域问题的8种方案.docx

    ### 前端解决跨域问题的八种方案 #### 一、同源策略概述 在探讨具体的跨域解决方案之前,我们先来了解下同源策略的基础知识。同源策略(Same-origin policy)是浏览器的一项重要的安全策略,用于限制一个来源的...

    javascript插件 解决双向跨域问题

    然而,有时我们需要在不同的域之间进行数据交换,例如API调用或共享cookies,这时就需要解决跨域问题。本文将深入探讨JavaScript插件如何解决双向跨域问题,并通过具体的插件实例——jcrossdomain,来阐述其实现方式...

    MVC中跨域解决方案

    1. CORS(Cross-Origin Resource Sharing,跨源资源共享):这是解决跨域问题的主要机制。CORS允许服务器明确指定哪些源可以访问其资源。在ASP.NET MVC中,我们可以通过以下方式配置CORS: - 在Global.asax.cs文件...

    vue中axios实现数据交互与跨域问题

    在现代前端开发中,Vue.js与axios的结合是数据交互的常见方式之一。...通过上述方法可以有效解决跨域问题,但需根据实际情况选择合适的解决方案。本文中提供的实例和方法,可以为Vue开发人员提供一定的参考借鉴价值。

Global site tag (gtag.js) - Google Analytics