jsonp与CORS处理跨域

什么是跨域?

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

同源策略
域名A 域名B 是否允许通信
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

什么是JSONP?

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取。

JSONP跨域的原理

在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略,我们可以实现跨域请求数据,当然,也需要服务端的配合。
当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段可执行的JavaScript代码。

例如

整个过程为:

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

这样就可以实现浏览器页面的跨域请求,但使用jsonp处理跨域有个很明显额缺点,就是只支持GET,不支持POST请求,就引出了目前使用较广的一种处理跨域的方法:CORS跨域资源共享机制

什么是CORS?

跨域资源共享(CORS) 是一种机制,它允许服务器使用新增的 HTTP 头部信息来告诉浏览器准许访问来自不同源服务器上指定的资源。

某接口返回的response header如下


clipboard.png

Access-Control-Allow-Origin

这个头部信息由服务器返回,用来明确指定那些客户端的域名允许访问这个资源。它的值可以是:

  • —— 允许任意域名

https://wqs.jd.com —— 一个完整的域名名字

如果接口请求是需要验证用户身份(request header中包含cookie),那返回的这个值不能为 * 号,必须为完整的域名

Access-Control-Allow-Headers

提供一个逗号分隔的列表表示服务器支持的请求数据类型。假如你使用自定义头部(比如:x-authentication-token 服务器需要在返回OPTIONS请求时,要把这个值放到这个头部里,否则请求会被阻止)。

Access-Control-Allow-Methods

一个逗号分隔的列表,表明服务器支持的请求类型(比如:GET,POST,OPTIONS)

Access-Control-Allow-Credentials

这个头部信息只会在服务器支持通过cookies传递验证信息时才会返回。它的值只有一个就是 true。只有这个值被返回时,才允许浏览器读取response的内容。

还有其他的HTTP头部字段以及使用PUT、DELETE、OPTiON方法请求时的预检查机制,详细可了解可查询官方文档:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

你可能感兴趣的:(jsonp与CORS处理跨域)