代理和跨域JSONP区别

代理和跨域JSONP区别

简介：

跨域问题是由于浏览器为了防止CSRF攻击，避免恶意攻击而带来的风险而采取的同源策略限制。当一个页面中使用XMLHTTPRequest对象发送HTTP请求时（XHR请求），必须保证当前页面和请求的对象是同源的，即协议、域名和端口号要完全一致，否则浏览器就会阻止此跨域请求返回的数据。

http://www.a.com 与 https://www.a.com 是不同源的，它们协议不同
http://www.a.com 与 http://www.b.com 是不同源的，它们域名不同
http://www.a.com：80 与 http://www.a.com：8080 是不同源的，它们端口号不同
http://www.a.com/test1.js 与 http://www.a.com/test2.js 是同源的

跨域请求的解决方案

虽然同源限制可以有效的防止网络上的恶意攻击，但是在实际开发应用中，我们往往需要从本站点向第三方站点发送XHR请求，这就需要有效的解决跨域问题，可以有以下几种：

1、JSONP：只支持GET，不支持POST请求
2、代理：使用代理去避开跨域请求，例如www.a.com/index.html页面去调用www.b.com/service.jsp，可以通过写一个接口www.a.com/service.jsp,由这个接口在后端去调用www.b.com/service.jsp并取到返回值，然后再返回给index.html。

服务端修改：例外在服务端页面添加header限制：

//允许所有来源访问header(‘Access-Control-Allow-Method:POST,GET’); 
// 允许访问的方式
header(‘Access-Control-Allow-Origin:*’); 

由于JSONP是最灵活，也是最常用的方式，这里主要讲解JSONP方式解决跨域问题。

JSONP原理:

浏览器只对XHR(XMLHttpRequest)请求有同源请求限制，而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制，利用这个“漏洞”就可以很好的解决跨域请求。JSONP就是利用了script标签无同源限制的特点来实现的，当向第三方站点请求时，我们可以将此请求放在
< script src=“http://www.b.com/request?para1=1”>< /script >

JSONP请求实现:

//Javascript实现
服务端：
public void ProcessRequest(HttpContext context) {
     context.Response.ContentType = “text/plain”;

//指定的回调函数名称string callbackFuncName = context.Request.QueryString[“callback”]; string reponseData = “test jsonp”;
//回调脚本string scriptContent = callbackFuncName + “(’” + reponseData + “’”; context.Response.Write(scriptContent); }

前端：

运行的结果显示test jsonp,可以看出整个过程：

script标签设置src属性为请求的地址，并判断回调函数作为参数
服务端构建JS脚本，传递返回给客户端的数据
客户端在回调函数中解析服务器生成的数据