首先我们要知道什么叫做跨域?在了解跨域之前我们要明白一个东西,那就是同源策略。
同源策略:
同源:协议,域名,端口号必须完全相同,AJAX默认的就是符合这个策略,不符合的其实就叫做跨域。
那么怎么样去处理跨域呢?通过一个案例我们来看
前台代码:
<script>
$('button').click(function() {
$.getJSON('http://127.0.0.1:8000/jquery-jsonp?callback=?', function(data) {
$('div').html(`
姓名:${data.name},
省:${data.city[0]},
市:${data.city[1]},
县:${data.city[2]}
`)
})
})
</script>
通过jQuery调用getJSON函数实现跨域,这里注意最后要加上?callback=?固定写法
后台代码:
app.all('/jquery-jsonp', (request, response) => {
//设置响应头
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
const data = {
name: 'xiaobai',
city: ['山东', '菏泽', '郓城']
};
//将对象转换为字符串
let str = JSON.stringify(data)
//接收callback参数
let cb = request.query.callback;
response.send((`${cb}(${str})`));
});
这里需要接收callback 的参数。