• ajax 跨域解决方法


    最近在开发过程中,使用ajax去异步调取图片。在开发中这个功能没什么问题,可以后来提测,重新部署之后就有问题了,这就是ajax的跨域问题。

    ajax核心对象XMLHttpRequest本身是不支持跨域的,这是由于javascript的同源策略所导致。但是我们可以通过其他方法来解决ajax的跨域问题。

    2015年3.4日补充:其实解决之道分为两种,利用jsonp ,或者转化成不跨域的解决方法

    1  由于我们是利用了jquery来写的ajax,我们一开始是准备 利用jsonp来解决的,客户端类似下面写法

    $.ajax({
    	type : "get",
    	url : "http://www.xxx.com/ajax.do",
    	dataType : "jsonp",
    	jsonp: "callbackparam",//服务端用于接收callback调用的function名的参数
    	jsonpCallback:"success_jsonpCallback",//callback的function名称
    	success : function(json){
    		alert(json);
    		alert(json[0].name);
    	},
    	error:function(){
    		alert('fail');
    	}
    });
    

      服务器端写法

    public void ProcessRequest (HttpContext context) {
    	context.Response.ContentType = "text/plain";
    	String callbackFunName = context.Request["callbackparam"];
    	context.Response.Write(callbackFunName + "([ { name:"John"}])");
    }
    

      这个方法其实蛮简单的,跟我们之前写的改动不大。这种利用jsonp的方案需要服务端客户端都作出支持才行

    2  由于我们这次项目开发的页面比较多,改动起来涉及的地方就比较多了。最后是采取的 直接修改nginx配置实现的。

    这种方案实质上是改成了不跨域的解决方案,类似于这么解决的:

    前端跨域请求目标a,我们在后端作出改变,后端抓取目标a,然后前端直接调用后端程序,这样就不跨域了,相当于加了一个中间层。

    平时对反向代理的理解也就是 缓存、安全、负载均衡,所以查了下方向代理

    反向代理(Reverse Proxy),顾名思义,就是代理的反向功能。我们使用代理,可以访问一些我们所不能直接访问到的网络,或者可以隐藏自己的真实身份。而反向代理,可以在不暴露内部服务器的情况下,让外部用户访问我们内部、防火墙后的服务。

     

            

        使用反向代理主要有以下好处:

    1  请求的统一控制,包括设置权限、过滤规则等;

    2  隐藏内部服务真实地址,暴露在外的只是反向代理服务器地址;

    3  实现负载均衡,内部可以采用多台服务器来组成服务器集群,外部还是可以采用一个地址访问;

     4 解决Ajax跨域问题。

     5 作为真实服务器的缓冲,解决瞬间负载量大的问题。

    项目完成之后,对ajax跨域问题在网上查了查,还知道了通过HTML中可以请求跨域资源的标签引用来达到跨域的目的,其实jsonp本质上就是采用了这种办法。

    HTML中可以请求跨域资源的标签是很多的,

    Script无疑是最合适的。在请求每一个脚本资源时,浏览器都会去解析并运行脚本文件内定义的函数,或需要马上执行的JavaScript代码,我们可以通过服务器返回一段脚本或JSON对象,在浏览器解析执行,从而达到跨域请求的目的。使用script标签来实现跨域请求,只能使用get方法请求服务器资源。并且传参的长度也受到地址栏长度的限制。

  • 相关阅读:
    算法复习———dijkstra求次短路(poj3255)
    NOIP2017年11月9日赛前模拟
    NOIP2017赛前模拟11月6日—7日总结
    刷题总结——子串(NOIP2015)
    NOIP2017赛前考试注意事项总结
    NOIP2017赛前模拟11月4日总结:
    NOIP2017赛前模拟11月2日总结
    刷题总结——Aeroplane chess(hdu4405)
    刷题总结——Interval query(hdu4343倍增+贪心)
    刷题总结——Throw nails(hdu4393)
  • 原文地址:https://www.cnblogs.com/taijun/p/3835966.html
Copyright © 2020-2023  润新知