javascipt 跨域资源共享、JSONP

跨域资源共享

通过XMLHttpRequest实现ajax通信的时候有一个主要限制,来自于跨域安全策略。默认情况下,xhr对象只能访问到与包含它的页面位于同一个域中的资源。如果请求目标跨域,则会出现跨域问题:

下面的表格描述了在不同情况下允不允许跨域的情况:

URL 说明 是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js
同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js
同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js
同一域名,不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js
同一域名,不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js
域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js
主域相同,子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js
同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)
http://www.cnblogs.com/a.js
http://www.a.com/b.js
不同域名 不允许

(来自http://www.360doc.com/content/14/0522/23/9200790_380060755.shtml

CORS(跨域资源共享)定义了在必须访问跨域资源时,浏览器和服务器应该如何沟通。CROS背后的思想就是使用自定义的HTTP头部让浏览器和服务器沟通,从而决定请求是否成功。

当浏览器给服务器发送请求时,其请求头部会包含一个头部信息:

Origin:http://localhost:63342

这时,如果想让服务器接受这个请求,应该在Access-Control-Allow-Origin头部中回发想通的源信息,如:

Access-Control-Allow-Origin: http://localhost:63342

如果想让任意域名都能访问,则可设置成*,以sevlet为例,调用response的setHeader即可:

response.setHeader("Access-Control-Allow-Origin", "*");

这样ajax再请求这个域名就不会出现跨域错误了。

JSONP

在CORS出现之前,也有很多办法实现跨域通信,JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,利用了DOM中能够执行跨域请求的功能,在不依赖XMLHttpRequest对象的情况下也能发送某些请求。

因为script标签是可以跨域请求资源的,比如你能在localhost:8080/a.html里面去请求别的域名的文件比如<script src="http://code.jquery.com/jquery-1.11.1.min.js">

那么,又因为是脚本请求,服务器返回的数据是立即执行的,比如如果服务器返回的数据是alert(“hello”),那么客户端就会弹一个hello出来,如下

Javascript:

var script = document.createElement("script");
script.src = "http://localhost:8080/SaleHouse/Test";
document.body.appendChild(script);

服务器:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.getWriter().write("alert(‘hello‘)");
}

执行js代码后,弹出hello对话框。

利用这一特性,我们可以让服务器将数据包装成一个函数,然后将服务器要传的数据传递到这个函数中,而这个数据用json格式是最合适不过了,像这样:

response.getWriter().write("handleResponse({‘name‘:‘zhangsan‘,‘age‘:‘18‘})");

这时,客户端请求到数据后会立即调用handleResponse方法,但是我们没有,没有就写一个呗

function handleResponse(resp){
    //处理服务器的响应
    console.log(resp.name + ":" + resp.age);
}
var script = document.createElement("script");
script.src = "http://localhost:8080/SaleHouse/Test";
document.body.appendChild(script);

为了处理更多数据,我们可以将函数名也作为参数传递给服务器,服务器动态返回要执行的函数,这就是JSONP。

Javascript:

function handleResponse(resp){
    //处理服务器的响应
    console.log(resp.name + ":" + resp.age);
}
var script = document.createElement("script");
//callback指定回调函数名
script.src = "http://localhost:8080/SaleHouse/Test?callback=handleResponse";
document.body.appendChild(script);

服务器:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String callback = request.getParameter("callback");
    response.getWriter().write(callback + "({‘name‘:‘zhangsan‘,‘age‘:‘18‘})");
}

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-12 06:48:37

javascipt 跨域资源共享、JSONP的相关文章

AJAX学习笔记2:XHR实现跨域资源共享(CORS)以及和JSONP的对比

1 前言: 首先对参考文章作者表示感谢,你们的经验总结给我们这些新手提供了太多资源.本文致力于解决AJAX的CORS问题,我在逻辑上进行了梳理:首先,系统的总结了CORS问题的起源-同源策略:其次,介绍JSONP这种仅能支持GET请求的跨域方式和CORS作对比:最后,阐述CORS的XHR解决方式和IE中的XDR解决方式,在此基础上提供了工具函数进行跨浏览器的HTTP请求对象创建. 2 跨域问题的源头-同源策略 在客户端编程语言中,如javascript和 ActionScript,同源策略是一个

JS跨域:jsonp、跨域资源共享、iframe+window.name

JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有好多种, 一.跨域资源共享: 也就是设置服务端的header,可以指定哪些域名可以请求,也是最简单的跨域方式(自我感觉),并且可以支持post等等. //指定允许其他域名访问 'Access-Control-Allow-Origin:*'//或指定域 //响应类型 'Access-Control-A

关于 CORS:跨域资源共享

I want to add CORS support to my server [CORS:跨域资源共享] 同源策略与JSONP

跨域的另一种解决方案CORS(CrossOrigin Resource Sharing)跨域资源共享

在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片或者脚本.但是Javascript脚本是不能获取这些资源的内容的,它只能被浏览器执行或渲染.主要原因还是出于安全考虑,浏览器会限制脚本中发起的跨站请求.(同源策略, 即JavaScript或Cookie只能访问同域下的内容).跨域的解决方案有多重JSONP.Flash.Iframe等,当然还有COR

跨域的另一种解决方案——CORS(Cross-Origin Resource Sharing)跨域资源共享

在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片或者脚本.但是Javascript脚本是不能获取这些资源的内容的,它只能被浏览器执行或渲染.主要原因还是出于安全考虑,浏览器会限制脚本中发起的跨站请求.(同源策略, 即JavaScript或Cookie只能访问同域下的内容).跨域的解决方案有多重JSONP.Flash.Iframe等,当然还有COR

HTML5安全:CORS(跨域资源共享)简介

前言:像CORS对于现代前端这么重要的技术在国内基本上居然很少有人使用和提及,在百度或者Google上搜索CORS,搜到的中文文章基本都是另外一种卫星定位技术CORS的介绍,让我等前端同学情何以堪(对比起来,用Google搜到的国外文章,基本都是跨域资源共享的介绍,说明了前端技术在国内外环境和发展的巨大差距). 我之前<用HTML5实现人脸识别>这篇文章中提到了“Face.com实现了CORS(跨域资源共享).CORS系统基本上可以让服务器暴露给其它域上文件的Ajax调用.这是一个伟大的功能,

CORS(跨域资源共享)简介

前言:像CORS对于现代前端这么重要的技术在国内基本上居然很少有人使用和提及,在百度或者Google上搜索CORS,搜到的中文文章基本都是另外一种卫星定位技术CORS的介绍,让我等前端同学情何以堪(对比起来,用Google搜到的国外文章,基本都是跨域资源共享的介绍,说明了前端技术在国内外环境和发展的巨大差距). 我之前<用HTML5实现人脸识别>这篇文章中提到了"Face.com实现了CORS(跨域资源共享).CORS系统基本上可以让服务器暴露给其它域上文件的Ajax调用.这是一个伟

跨域访问JSONP CORS

一.JSONP 常用的Jquery框架支持jsonp方式请求,该方式只支持GET方法,传参大小有限,而且需要后台根据jsonp的请求方式进行封装结果返回. 其中参数jsonp默认为callback,jsonpCallback为随机生成的回调函数名,若指定handleRequest,则后台参数返回时为handleRequest("data"). 二.CORS 跨域资源共享CORS方式通过自定义HTTP头部来使浏览器和服务器互相了解对方. 服务器端对CORS的支持主要是设置相应的头部进行支

HTML5安全:CORS(跨域资源共享)简介(转)

前言:像CORS对于现代前端这么重要的技术在国内基本上居然很少有人使用和提及,在百度或者Google上搜索CORS,搜到的中文文章基本都是另外一种卫星定位技术CORS的介绍,让我等前端同学情何以堪(对比起来,用Google搜到的国外文章,基本都是跨域资源共享的介绍,说明了前端技术在国内外环境和发展的巨大差距). 我之前<用HTML5实现人脸识别>这篇文章中提到了“Face.com实现了CORS(跨域资源共享).CORS系统基本上可以让服务器暴露给其它域上文件的Ajax调用.这是一个伟大的功能,