在上一个node连接数据库,然后通过http://localhost:3000/test能读取到json数据,但是前端通过ajax并不能直接访问,因为存在跨域问题。发起请求一般有下图的提示。
刚开始接触前端数据交互,跨域这个问题一直困扰了我好久,现在特地写一个博客记录一下。这个跨域问题前端和后端都能解决的,后端一般
//设置响应头,设置允许跨域 // res.setHeader('Access-Control-Allow-Origin', '*'); // res.setHeader('Access-Control-Allow-Headers', '*');
这样处理就可以了。
这一节我先讲一下前端的处理。
具体代码
在这里插入代码片`在这里插入代码片`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery-jsonp</title>
<style>
#result {
width: 100%;
height: 100%;
border: solid 1px #90b;
}
</style>
<script crossorigin="anonymous" src='https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
</head>
<body>
<button>点击发送 jsonp 请求</button>
<div id="result">
</div>
<script>
$('button').eq(0).click(function() {
$.getJSON('http://127.0.0.1:3000/test?callback=?', function(data) {
result.innerHTML = JSON.stringify(data);
});
});
</script>
</body>
</html>
同时后端返回的数据格式也要进行处理
具体代码
router.get('/test', function(req, res, next) {
var sql = 'select * from blogs'
db.query(sql, function(err, rows) {
if (err) {
console.log(err)
} else {
console.log(rows)
let str = JSON.stringify(rows);
let cb = req.query.callback;
res.end(`${cb}(${str})`);
// res.send("cb(" + JSON.stringify(rows) + ")");
}
});
});
打开jQuery-jsonp这个页面点击发送jsonp请求