项目中JS跨域解决方案

最新推荐文章于 2024-09-08 11:14:16 发布

iteye_11753

最新推荐文章于 2024-09-08 11:14:16 发布

阅读量120

点赞数

分类专栏：客户端技术---JS---JQUERY 文章标签： javascript 前端 json ViewUI

客户端技术---JS---JQUERY 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

问题：（由下描述可知，针对JS/AJAX的操作会存在跨域限制，而对FORM没限制）

　　跨域是我在日常面试中经常会问到的问题，这词在前端界出现的频率不低，主要原因还是由于安全限制(同源策略，即JavaScript或Cookie只能访问同域下的内容)，因为我们在日常的项目开发时会不可避免的需要进行跨域操作，所以跨域能力也算是前端工程师的基本功之一。

我接触的项目中使用到的跨域解决方案如下：

一、使用剪切板（由于操作起来不友好，所以这种方案不建议）
alert(window.clipboardData.getData("text"));
window.clipboardData.setData("text","txt");

二、JSONP（适合于前后端交互，如帐管侧的JSP访问CRM侧的WEB层）FORM+POST没问题，AJAX+POST有问题(需要用该方案)

CRM侧WEB代码为：

public void getPrintButtonForJsonp(HttpServletRequest request, HttpServletResponse response) throws Exception {
     String callback = request.getParameter("callback");   
     ...;
     response.setCharacterEncoding("GBK");
     response.setContentType("text/html;charset=GBK");
     response.getWriter().print(callback+"({returnInvoice:{status:'0',message:'findNoInvoice'}});");   
}

帐管侧前台调用方法为：getPrintButtonForJsonp

  $.ajax({
        url: 'http://localhost:8080/....ReportAction?action=getPrintButtonForJsonp&callback=?',
        dataType: 'jsonp',
        global: false,
        success: function(json) {
          var invoiceInfo=json.returnInvoice;
       if(invoiceInfo.status==1){
        	//成功
       }else{
        	alert('调用失败！'+invoiceInfo.message);
       }
        },
        error: function(json) {
        }
     });

三、使用IFRAME，这种方法使用的非常频繁【用于查询头，前前交互】

跨域原理图

应用场景：
WEB应用1通过弹出窗口形式调用WEB应用2的页面，WEB应用2通过window.returnValue返回值给WEB应用1
准备工作：WEB应用1（调用方）

test.jsp（功能使用页面）

<input type="button" οnclick="selectInsAddress()" name="" value="点击">
<script type="text/javascript">
 function selectInsAddress(){
  var result = window.showModalDialog("http://localhost:8080/tt/KuaYuFrame.jsp","org","scroll:yes;resizable:no;status:no;dialogHeight:695px;dialogWidth:800px");
  alert("拿到"+result);
 }
</script>

KuaYuFrame.jsp（跨域页面，此页面可供该应用其它功能共享）

<script type="text/javascript">
function init(){
 var url="http://10.1.21.88:8080/crm/boss/customer/cust/queryCommonCustForCallBack.jsp?callBackUrl=query_boss_customer_callback.jsp";
 pbossIframe.location=url;
}
function callBack(param){
 window.returnValue=param;
 window.self.close();
}
</script>
</head>
<body οnlοad="init()">
<iframe id="pbossIframe" src=""  height="620px" width="959px" marginheight="0" marginwidth="0" ></iframe>
</body>

KuaYucallback.jsp（供目标应用回调）

<%
    String custId = request.getParameter("returnValue");
%>
<script type="text/javascript">
function comeBack(){
    parent.parent.callBack("<%=custId%>");
}
</script>
</head>
<body οnlοad="comeBack()">
</body>

准备工作：WEB应用2（被调用方）
queryCommonCust.jsp

<iframe id="wangtlIframe" src=""  height="" width="" marginheight="0" marginwidth="0" style="visibility: hidden;"></iframe>
function submit_callBackUrl(val)
{ //val为待返回值
 wangtlIframe.location="http://localhost:8080/tt/<%=callBackUrl%>?returnValue="+val;
}

原理解析：
其中调用方的test.jsp为功能页面，通过弹出窗口打开自己域下KuaYuFrame.jsp，其内嵌目标域下的目标功能页面queryCommonCust.jsp，其待事成后会内嵌自己域下的KuaYucallback.jsp，
其会通过parent.parent调到自己域的方法。