前面寫到的jsonp 還是 html postMessage 實現(xiàn)跨域，都是在客戶端上實現(xiàn)的，但本身有缺陷，前面有舉例講到，下面寫寫在服務端代理跨域。（ps:了解之前最好先掌握http協(xié)議相關知識~分享資料）
2個點：express、 axios
先了解一下這兩點,根據(jù)文檔說明看看怎么使用：
express:基于 Node.js 的 web 應用開發(fā)框架
axios:一個基于 promise 的 HTTP 庫
小白：菜哥哥，了解完這兩個要怎么請求？
老菜：先拋開這些，平時我們怎么去請求數(shù)據(jù)呢？
小白：平時是后端給接口呀！
老菜：對呀.那假如我們讓后端請求完數(shù)據(jù)同樣以接口的方式返回給我們不就可以了嘛。同理，通過node.js請求數(shù)據(jù) ，我們直接調(diào)接口就好了呀
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)
})
})
}
}
})
上面服務端代理跨域請求數(shù)據(jù)，接下來客戶端怎么調(diào)用？
前面寫到 接口是 /getRankings，那么客戶端調(diào)取就很簡單了
function getRankings () {
const url = '/getRankings'
const data = Object.assign({}, {
//參數(shù)
})
return axios.get(url, {
params: data
}).then((res) => {
return Promise.resolve(res.data)
})
}
案例：請求qq音樂中的接口
jsonp和node.js兩種形式的跨域，可以clone下來看看
大菜：前面我說比較喜歡用服務端代理跨域，感覺服務端強大一點，可以配置請求頭header之類等等，小白啊，推薦一篇關于跨域的文章 一篇文章可以解決跨域，還有獨門秘訣, 先知理，而后明之
小白結語：
之前我強硬的記住怎么解決，而不知原理，換到其他場景去跨域就不知如何解決，兜兜轉轉，結合前面幾篇跨域筆記是我淺顯的理解，繼續(xù)去啃獨門秘訣～～
