解决跨域问题!

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
})

 

posted @ 2019-10-29 20:25  菜鸟小何  阅读(363)  评论(0编辑  收藏  举报