最近在开发过程中,使用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方法请求服务器资源。并且传参的长度也受到地址栏长度的限制。

ajax 跨域解决方法的更多相关文章

  1. 转载的别人的ajax跨域解决方法

    http://dynamic.vip.xxxxxx.com/active/<controllers>/<active>/<id> 放在浏览器地址栏中访问可以得到正确 ...

  2. [转]vue跨域解决方法

      vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...

  3. AJAX跨域问题解决方法(4)——调用方解决跨域

    调用方解决跨域的方法只有一种,那就是隐藏跨域. 何为隐藏跨域? 隐藏跨域的核心思路是通过反向代理隐藏跨域以欺骗浏览器 什么是反向代理?反向代理是指通过中间服务器使得访问同一个域名的两个不同url最终会 ...

  4. JavaScript跨域解决方法大全

    跨域的定义:JavaScript出于安全性考虑,同源策略机制对跨域访问做了限制.域仅仅是通过“URL的首部”字符串进行识别,“URL的首部”指window.location.protocol +win ...

  5. ASP.NET MVC 实现AJAX跨域请求方法《1》

    ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...

  6. ajax 跨域解决 网上资料

    PHP中运用jQuery的Ajax跨域调用实现代码,需要的朋友可以参考下   可以在页面定义一个调用方法,如下: 复制代码代码如下: function getData(){ $.getJSON(&qu ...

  7. PHP Ajax跨域解决

    PHP Ajax 跨域问题最佳解决方案 本文通过设置Access-Control-Allow-Origin来实现跨域. 例如:客户端的域名是client.runoob.com,而请求的域名是serve ...

  8. ajax原理和跨域解决方法

    ajax是异步的 JavaScript 和 XML.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 1--启动 ...

  9. 解决ajax跨域的方法原理详解之Cors方法

    1.神马是跨域(Cross Domain)   对于端口和协议的不同,只能通过后台来解决.   一句话:同一个ip.同一个网络协议.同一个端口,三者都满足就是同一个域,否则就是 跨域问题了.而为什么开 ...

随机推荐

  1. spark集群搭建(java)未完待续

    环境 操作系统:windows10 虚拟机工具:VMware14.1 NUX版本:Centos7.2(64) JDK:1.8(64) 一.安装linux,master(桥接模式上网),slave(na ...

  2. ClickOnce 发布WinForm应用程序(非签名方式)

    ClickOnce IIS7发布WinForm应用程序,非签名方式(不勾选签名中的"为ClickOnce清单签名") 一.在D盘上建一个文件夹”MyAppPath”.      该 ...

  3. Grunt - 安装指南

    发现周围有些人对前端存在偏见. 他们认为前端只是用没那么复杂的技术对着界面调来调去,一点点打磨,最后做出一个没什么实用价值的“花瓶”. 其实,前端的技术栈并不简单,比如我们可以用Grunt进行一些自动 ...

  4. CentOS7安装后连不上网络无法使用yum

    更新日期:2018年5月31日 笔者今天在本地VMware中安装了CentOS7后,使用yum安装wget的时候发现不能下载,并有下图所示的提示: 于是,笔者就去问度娘,然后就找到了如下各种回复: 1 ...

  5. Java基础教程(13)--包

      为了使类型更易于查找,避免命名冲突和访问控制,我们应该使用包来对自己定义的类型进行管理.这里说的类型可以是类.接口.枚举和注解(枚举和注解的内容会在后续教程中介绍).使用包来管理我们的代码,有以下 ...

  6. tcpcopy简介

    本文内容是整理自 王斌的博客(http://blog.csdn.net/wangbin579)和郑钧的博客(http://www.cnblogs.com/zhengyun_ustc),以便让自己可以有 ...

  7. ASP.NET Core依赖注入

         一.什么是依赖注入(Denpendency Injection) 这也是个老身常谈的问题,到底依赖注入是什么? 为什么要用它? 初学者特别容易对控制反转IOC(Iversion of Con ...

  8. [WEB面试题] web前端面试题JavaScript第一弹,个人整理部分面试题汇总

    以下内容仅供参考,成年人不讲对错只讲利弊 1.什么是JavaScript原型链?如何理解 JavaScript中的每个对象都有一个prototype属性,我们称之为原型 原型的值是一个对象有自己的原型 ...

  9. hihocoder [Offer收割]编程练习赛12 [1494] ---- 一面砖墙

    原题链接 一面砖墙 算法分析 设墙的宽度为 range,则需要统计横坐标为 1,2,3,4,...,range-1 处的墙缝数,取最大的墙缝数(记为maxCrevices),从该处划一道竖线,竖线穿过 ...

  10. sql 字段别名里包含特殊字符

    select ename employee.name from emp; 在数据库查询时,如果列名的别名里特殊符号,报错. select ename 'employee.name' from emp; ...