1、使用jsonp解决跨域问题(不推荐使用)
router.get('/', function(req, res, next) {
let _callback = req.query.callback
let { limitNum, pageCode } = req.query; // 获取用户提交的分页数据
limitNum = limitNum * 1 || 10
pageCode = pageCode * 1 ||0
sql.paging(User, {}, {_id: 0}, limitNum, pageCode).then(data => {
var obj = {
code: '200',
message: 'success',
data: data
}
if (_callback) {
// 这两步设置发送也是NODE.JS发送JSONP必备
res.type('text/javascript');
res.send(_callback + '(' + JSON.stringify(obj) + ')');
} else {
res.json(obj)
}
})
});
$.ajax({
url: 'http://localhost:3000/users',
dataType: 'jsonp', // ******************************
success: function (data) {
console.log(data)
}
})
2、cors解决跨域问题 (推荐使用,前端正常使用,后端麻烦)
> app.js中添加如下代码
```
var allowCrossDomain = function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');//自定义中间件,设置跨域需要的响应头。
next();
};
app.use(allowCrossDomain) ////运用跨域的中间件
> 接口无需做额外的配置
```
// cors 解决跨域的问题,不需要修改此接口
router.get('/', function(req, res, next) {
let { limitNum, pageCode } = req.query; // 获取用户提交的分页数据
limitNum = limitNum * 1 || 10
pageCode = pageCode * 1 ||0
sql.paging(User, {}, {_id: 0}, limitNum, pageCode).then(data => {
res.send({
code: '200',
message: 'success',
data: data
})
})
});
> 请求数据
```
$.ajax({
url: 'http://localhost:3000/users',
success: function (data) {
console.log(data)
}
})
3、使用反向代理解决跨域问题
项目根目录创建 vue.config.js**
* 单个反向代理 ----- 一定要重启服务器
```
module.exports = {
devServer: { // 开发服务器
proxy: 'http://localhost:3000'
}
}
数据请求 /pro ------》 http://localhost:3000/pro
```
axios.get('/pro').then(res => {
console.log(res)
this.prolist = res.data.data
})
长风破浪会有时,直挂云帆济沧海