什么是跨域
因为浏览器有个同源策略的限制,只要发送url请求的协议、域名、端口三者与当前页面(location.origin)的地址有一个不同, 即为跨域。
协议不同: http 和 https;
域名不同: 主域或者子域不同;
端口不同: 如6080, 6090;
跨域通信的两种方式
JSONP
因为浏览器对 script 标签没有同源限制,所以可以通过它来加载不同域下的数据。
(1) 前端test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JSONP 测试</title>
</head>
<body>
<script>
function jsonCallback(result){
document.write('JSONP:' + JSON.stringify(result));
}
</script>
<script src="http://10.9.8.46:6080/api/product/jsonp?callback=jsonCallback"></script>
</body>
</html>
(2) 服务端node
router.route('/jsonp').get((req, res) => {
let cb = req.query.callback;
let data = {
name: 'bob',
age: 24
};
let dataString = JSON.stringify(data);
let send = `${cb}(${dataString})`;
if (cb !== undefined) {
res.send(send);
} else {
res.send(data);
}
});
效果: test页面可以输出后台的数据
CORS
cors即为跨域资源共享,是现代浏览器实现跨域通信更好的一种方式。
(1)前端html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CORS 测试</title>
</head>
<body>
<script>
window.onload = function(){
var ajax = new XMLHttpRequest();
ajax.open('GET','http://10.9.8.46:6080/api/product/jsonp', true);
ajax.send();
ajax.onreadystatechange = function(){
if(ajax.readyState === 4){
if(ajax.status === 200){
console.log(ajax.responseText);
}
}
}
}
</script>
</body>
</html>
(2) 服务端node
app.js 中引入cors库
const cors = require('cors');
app.options('*', cors(loginConfig.corsOptions));
app.all('*', cors(loginConfig.corsOptions));
loginConfig.js
const corsOptions: {
origin: ['http://localhost:6080', null],
methods: ['GET,HEAD,PUT,PATCH,POST,DELETE'],
preflightContinue: false,
credentials: true
}
router.js
router.route('/jsonp').get((req, res) => {
let data = {
name: 'bob',
age: 24
};
res.send(send);
});
效果: 前端页面的控制台可以获取服务端数据data。
总结
- jsonp的跨域方式只能是get请求,适合小数据的传输, 兼容ie8,9较早的浏览器。
- cors的跨域方式支持get,post等多种请求方式, 可以传输较多数据, 支持现代浏览器(ie10+)。
- 跨域通信的方式还有 Proxy代理等。
- 想了解cors更多详情,请移步至同事haines的博文: http://blog.hainest.com/cross-domain-and-cross-origin/