浅析CROS的实现
来源:互联网 发布:java驱动测试 编辑:程序博客网 时间:2024/05/17 02:40
要说跨域首先了解同源策略:
同源策略,它是由Netscape提出的一个著名的安全策略。
现在所有支持JavaScript 的浏览器都会使用这个策略。
所谓同源是指,域名,协议,端口相同。
实现跨域通常用以下三种方法
JSONP:网页通过添加一个script元素,向服务器请求JSON数据,这种做法不受同源政策限制
WebSocket : ws://(非加密)和wss://(加密)作为协议前缀。该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信。
CORS : CORS需要浏览器和服务器同时支持。
那么为什么要实现跨域?看下面的一个例子:
前端代码:
var xmlhttp = new XMLHttpRequest() if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { document.getElementById('my').innerHTML = xmlhttp.responseText } else { document.getElementById('my').innerHTML = 'failed' } } xmlhttp.open('POST', 'http://localhost:3000/get', true) xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded') xmlhttp.send(data)
后端代码:
router.post('/get', async (ctx, next) => { var name = ctx.request.body.name || '', password = ctx.request.body.psd || ''; userdata = await user.get(name); uname = userdata[0].name; upsd = userdata[0].psd; console.log(`signin with database: ${uname}, password: ${upsd}`); if (name === uname && password === upsd) { ctx.response.body = success; } else { ctx.response.body = failed; }});
上面的例子是用ajax请求后台数据。虽然得到了状态码200但是却无法正确获得数据。原因正是因为同源策略。同源策略限制的行为有以下几种:
(1) Cookie、LocalStorage 和 IndexDB 无法读取。(2) DOM 无法获得。(3) AJAX 请求不能发送。
此时可以使用提到的解决跨域的方式。这里讨论CROS的实现
整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
浏览器直接发出CORS请求。具体来说,就是在头信息之中,增加一个Origin字段。Origin字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求。
如果Origin指定的源,不在许可范围内,服务器会返回一个正常的HTTP回应。浏览器发现,这个回应的头信息没有包含Access-Control-Allow-Origin字段(详见下文),就知道出错了,从而抛出一个错误,被XMLHttpRequest的onerror回调函数捕获。注意,这种错误无法通过状态码识别,因为HTTP回应的状态码有可能是200。
如果Origin指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段。
(1)Access-Control-Allow-Origin
该字段是必须的。它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。
(2)Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏览器发送Cookie,删除该字段即可。
(3)Access-Control-Expose-Headers
该字段可选。CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。上面的例子指定,getResponseHeader(‘FooBar’)可以返回FooBar字段的值。
可以说跨域问题主要在header上下功夫。
在koa中有cros模块可以实现 代码如下
var koa = require('koa');var route = require('koa-route');var cors = require('koa-cors');var app = koa();app.use(cors());app.use(route.get('/', function() { this.body = { msg: 'Hello World!' };}));app.listen(3000);
在Express中可以引入cros模块
var express = require('express') , cors = require('cors') , app = express();app.use(cors());app.get('/products/:id', function(req, res, next){ res.json({msg: 'This is CORS-enabled for all origins!'});});app.listen(80, function(){ console.log('CORS-enabled web server listening on port 80');});
跨域成功的话响应头部会多出跨域相关的字段,如下。
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Allow-Methods: GET,HEAD,PUT,POST,DELETE
Content-Type: text/plain; charset=utf-8
Content-Length: 6
Date: Wed, 02 Aug 2017 13:19:55 GMT
Connection: keep-alive
至此已经用cros解决了跨域问题。
- 浅析CROS的实现
- CROS实现跨域时授权问题(401错误)的解决
- CROS
- cros
- Dojo实现跨源(CROS)请求
- .net cros 跨域的坑
- 浅析AnyType的实现
- alloc_pages的实现浅析
- spring中解决CROS跨域请求的方案
- CROS请求
- 浅析桌面精灵的实现
- 浅析桌面精灵的实现
- 浅析动态代理的实现
- 浅析malloc()的实现方式
- 浅析linux printk的实现
- assert的实现原理浅析
- 浅析ArrayList的内部实现
- 浅析malloc()的实现方式
- Java基础概念
- Android 活用提示窗Toast和Snackbar
- thinkphp-U方法传参
- 如何重置CentOS 7的Root密码?设置CentOS 7的Root密码的方法与步骤
- SpringMVC踩过的坑
- 浅析CROS的实现
- 自己动手撸一个Jlink-TinyJlink诞生记
- Android_studio编译遇到安装不了问题
- [BZOJ1367] [Baltic2004]sequence
- 【HDU 1873】看病要排队(优先队列-好题)
- js中相似的方法
- 训练总结8.2
- Git本地服务器搭建及使用详解
- vim配置