1.设置发送头：node里
res.header("Access-Control-Allow-Origin","*");
Node.js后台配置(express框架)
Node.js的后台也相对来说比较简单就可以进行配置。只需用express如下配置:
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
//这段仅仅为了方便返回json而已
res.header("Content-Type", "application/json;charset=utf-8");
if(req.method == 'OPTIONS') {
//让options请求快速返回
res.sendStatus(200);
} else {
next();
}
});2.jsonp解决跨域的问题就是通过js动态添加script：在script中添加传参的ip,然后利用callback函数。
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=a";
document.body.insertBefore(script, document.body.firstChild);
调用回调函数
function (response){
// 对response数据进行操作代码
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP实现跨域案例</title>
</head>
<body>
<div id="div">
<button id="btn">点击</button>
</div>
</body>
<script type="text/javascript">
function a(response){
console.log(response);
}
</script>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=a";
document.body.insertBefore(script, document.body.firstChild);
};
};
</script>
</html>
3.jsonp爬去qq音乐的数据:在vue项目中,在项目中安装jsonp
a.先引入axios:为了修改url头文件，从而获取数据
var axios = require('axios')
b.在sever中设置表头
apiRoutes.get('/getDiscList', function (req, res) {
var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
axios.get(url, {
headers: {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: req.query
}).then((response) => {
res.json(response.data)
}).catch((e) => {
console.log(e)
})
})
c.在应用组件中使用jsonp
import axios from 'axios'
export function getRecommend() {
const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
const data = Object.assign({}, commonParams, {
platform: 'h5',
uin: 0,
needNewCode: 1
})
return jsonp(url, data, options)
}
export function getDiscList() {
const url = '/api/getDiscList'
const data = Object.assign({}, commonParams, {
platform: 'yqq',
hostUin: 0,
sin: 0,
ein: 29,
sortId: 5,
needNewCode: 0,
categoryId: 10000000,
rnd: Math.random(),
format: 'json'
})
return axios.get(url, {
params: data
}).then((res) => {
return Promise.resolve(res.data)
})
}
export function getSongList(disstid) {
const url = 'https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg'
const data = Object.assign({}, commonParams, {
disstid,
type: 1,
json: 1,
utf8: 1,
onlysong: 0,
platform: 'yqq',
hostUin: 0,
needNewCode: 0
})
return jsonp(url, data, options)
}
d.在vue模块中引入上面的文件，然后使用里面的方法即可获取数据
import {getRecommend, getDiscList} from 'api/recommend'
import {playlistMixin} from 'common/js/mixin'
import {ERR_OK} from 'api/config'
import {mapMutations} from 'vuex'
export default {
mixins: [playlistMixin],
data() {
return {
recommends: [],
discList: []
}
},
created() {
this._getRecommend()
this._getDiscList()
},
methods: {
handlePlaylist(playlist) {
const bottom = playlist.length > 0 ? '60px' : ''
this.$refs.recommend.style.bottom = bottom
this.$refs.scroll.refresh()
},
loadImage() {
if (!this.checkloaded) {
this.checkloaded = true
this.$refs.scroll.refresh()
}
},
selectItem(item) {
this.$router.push({
path: `/recommend/${item.dissid}`
})
this.setDisc(item)
},
_getRecommend() {
getRecommend().then((res) => {
if (res.code === ERR_OK) {
this.recommends = res.data.slider
}
})
},
_getDiscList() {
getDiscList().then((res) => {
if (res.code === ERR_OK) {
this.discList = res.data.list
}
})
},
...mapMutations({
setDisc: 'SET_DISC'
})
},
components: {
Slider,
Loading,
Scroll
}
}
这样就可以获取网上的数据
7395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
