解决跨域问题!
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 })
长风破浪会有时,直挂云帆济沧海