node.js代理跨域 「案例: 音乐接口」

2023年4月24日 206次阅读 来源: Searchen

前面写到的jsonp 还是 html postMessage 实现跨域，都是在客户端上实现的，但本身有缺陷，前面有举例讲到，下面写写在服务端代理跨域。（ps:了解之前最好先掌握http协议相关知识~分享资料）

2个点：express、 axios
先了解一下这两点,根据文档说明看看怎么使用：
express:基于 Node.js 的 web 应用开发框架
axios:一个基于 promise 的 HTTP 库

小白：菜哥哥，了解完这两个要怎么请求？
老菜：先抛开这些，平时我们怎么去请求数据呢？
小白：平时是后端给接口呀！
老菜：对呀.那假如我们让后端请求完数据同样以接口的方式返回给我们不就可以了嘛。同理，通过node.js请求数据 ，我们直接调接口就好了呀

ps: 这里是vue-cli+webpack构建的项目, 原理一样，下面直接代码：
项目中找到webpack.dev.config.js 文件夹
安装express、axios

const axios = require('axios') //引入axios
const express = require('express') //引入express
const app = express() //请求server
const apiRoutes = express.Router()
app.use('/', apiRoutes)

const devWebpackConfig = merge(baseWebpackConfig, {
  devServer: {
    before (app) {
      //   /getRankings就是接口地址
      app.get('/getRankings', (req, res) => {
        const url = 'https://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg'
        axios.get(url, {
          params: req.query
        }).then((response)=>{
          res.json(response.data)
        }).catch((e)=>{
          console.log(e)
        })

      })
    }
  }
})

上面服务端代理跨域请求数据，接下来客户端怎么调用？

前面写到 接口是 /getRankings，那么客户端调取就很简单了

function getRankings () {
  const url = '/getRankings'
  const data = Object.assign({},  {
         //参数
  })
  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}

案例：请求qq音乐中的接口

github代码

jsonp和node.js两种形式的跨域，可以clone下来看看

大菜：前面我说比较喜欢用服务端代理跨域，感觉服务端强大一点，可以配置请求头header之类等等，小白啊，推荐一篇关于跨域的文章 一篇文章可以解决跨域，还有独门秘诀, 先知理，而后明之

小白结语：
之前我强硬的记住怎么解决，而不知原理，换到其他场景去跨域就不知如何解决，兜兜转转，结合前面几篇跨域笔记是我浅显的理解，继续去啃独门秘诀～～

    原文作者：Searchen
    原文地址: https://www.jianshu.com/p/ff8cf4beaa7a
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞