在学习vue音乐播放器的案例中,遇到一个跨域请求的问题,有一种解决方案,叫做后端代理。也可以直接将数据存储到本地,获取本地数据
在webpack.dev.conf.js中
- 定义app,这样就是不直接去请求服务端,是先请求webpack.dev.conf.js然后再请求服务器.欺骗服务器我们的refer和host
var axios = require('axios')
const express = require('express')
const app = express();
在devServer的配置中添加:
before(app) {
app.get('/api/slider', (req, res) => {
var url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg';
axios.get(url,{
headers:{
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: res.query
}).then((response)=>{
res.json(response.data)
}).catch((e)=>{
console.log(e)
})
})
}
//此地址就变成了`/api/slider` 给recommend.js来请求
recommend.js 调用
import axios from 'axios'
export function getDiscList() {
const url = '/api/slider'
const data = Object.assign({}, commonParams, {
g_tk: 1194283357,
uin: 1513013709,
format: 'json',
_:1528793843228
})
return axios.get(url, {
params: data
}).then((res) => {
return Promise.resolve(res.data)
})
}
获取本地数据
- 写一个json文件
- 在webpack.dev.conf.js中进行配置
//第一步:
const express = require('express')
const app = express()//请求server
var slider = require('../data/sliderData.json')//加载本地数据文件
//第二步找到devServer,在里面添加
before(app) {
app.get('/api/slider', (req, res) => {
res.json({
status: 1,
data: slider.data
})//接口返回json数据,上面配置的数据seller就赋值给data请求后调用
})
}
- 在js中调用
import axios from 'axios'
const url = '/api/slider';
return axios.get(url).then((res) => {
return Promise.resolve(res.data)
})