解决跨域问题!

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 @   菜鸟小何  阅读(366)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
点击右上角即可分享
微信分享提示