跨域问题总是很难缠,很多时候开发人员都是不自觉间就遇到了跨域,在此晒晒我的解决之道。
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') + '¶m1='+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
分享到:
相关推荐
window.name 解决跨域问题的文档 window.name 传输技术是 Thomas Frank 发明的,旨在解决 cookie 的一些劣势,例如每个域名 4 x 20 Kb 的限制、数据只能是字符串、设置和获取 cookie 语法的复杂等等。后来,Kris ...
本篇文章将详细介绍如何利用Nginx解决跨域问题。 首先,了解跨域的基本概念。跨域是指由于浏览器的同源策略,JavaScript只能请求与当前页面同源(协议、域名和端口都相同)的资源。当尝试请求不同源的资源时,就会...
使用docker部署nginx前后端解决跨域问题
【标题】:“Tomcat配置解决跨域问题” 在Web开发中,跨域(Cross-Origin)是一种常见的安全限制,它阻止浏览器从一个源加载资源到另一个不同的源。这主要是为了防止恶意脚本通过注入来窃取数据。然而,在进行前后...
在这个“解决跨域问题的jar资源文件.zip”中,包含了两个关键的JAR文件:cors-filter-2.4.jar 和 java-property-utils-1.9.1.jar。这两个库是针对Java Web应用的,用于处理跨域请求。 `cors-filter-2.4.jar` 是一个...
1、地址http://a.test.com:8888/testAjaxCross/public/index.do 演示跨域问题以及跨子域名解决方法 2、地址...演示jsonp解决跨域问题的三种方案jsonp、$getJSON、$ajax等
**Nginx安装与解决跨域问题** 在现代Web开发中,由于浏览器的同源策略,跨域问题经常出现,限制了不同源之间的通信。Nginx作为一个高性能的反向代理服务器,常被用于处理此类问题。本篇将详细介绍如何在Linux环境下...
我使用的是httpClient 进行内部转发 我们在A的服务器上,将前台的文件流,通过httpClient传输到B的服务器上(B的服务器通过控制层接受A传输的文件流,让后保存在B的服务器上。返回一个json结果)
解决跨域问题的关键配置将在`web.xml`中进行。我们需要添加一个名为`CorsFilter`的过滤器,并设置其初始化参数。以下是一个示例配置: ```xml <filter-name>CorsFilter <filter-class>org.apache.cxf.transport....
本篇将详细讲解如何使用getJSON来解决跨域问题,以及涉及到的相关技术点。 首先,我们要理解什么是跨域。跨域是指一个域下的文档或脚本尝试请求另一个域下的资源时,如果两个域不相同,就会触发跨域安全策略。例如...
在IT行业中,跨域问题是一个常见的挑战,...总之,解决跨域问题需要理解浏览器的同源策略,以及如何利用JSONP、CORS等技术进行规避。在Java环境下,可以利用Spring等框架的特性来配置跨域策略,确保前后端的顺利通信。
Tomcat lib目录下添加cors-filter-1.7.jar,java-property-utils-1.9.jar这两个jar包,项目中web.xml 中添加filter,以及出现OPTIONS 类型的请求并返回403的解决方案;压缩文件包含jar文件,以及web.xml配置。
Java服务器端解决跨域问题是一项常见的任务,尤其是在开发Web应用时。跨域是由于浏览器的安全策略,即同源策略(Same-Origin Policy)所引起的。同源策略限制了来自不同源的HTTP请求,防止恶意网站通过JavaScript...
### 前端解决跨域问题的八种方案 #### 一、同源策略概述 在探讨具体的跨域解决方案之前,我们先来了解下同源策略的基础知识。同源策略(Same-origin policy)是浏览器的一项重要的安全策略,用于限制一个来源的...
然而,有时我们需要在不同的域之间进行数据交换,例如API调用或共享cookies,这时就需要解决跨域问题。本文将深入探讨JavaScript插件如何解决双向跨域问题,并通过具体的插件实例——jcrossdomain,来阐述其实现方式...
1. CORS(Cross-Origin Resource Sharing,跨源资源共享):这是解决跨域问题的主要机制。CORS允许服务器明确指定哪些源可以访问其资源。在ASP.NET MVC中,我们可以通过以下方式配置CORS: - 在Global.asax.cs文件...
"doc解决跨域问题.pdf"文档中介绍的是如何在基于Koa的后端项目中处理这个问题。Koa是一个由Express.js作者创建的现代JavaScript Web框架,它提供了一种更简洁的方式来处理HTTP请求。 首先,项目初始化是必要的,这...
在现代前端开发中,Vue.js与axios的结合是数据交互的常见方式之一。...通过上述方法可以有效解决跨域问题,但需根据实际情况选择合适的解决方案。本文中提供的实例和方法,可以为Vue开发人员提供一定的参考借鉴价值。