在vue中使用jsonp跨域访问数据
1.首先在src目录下建立一个api目录,下面建立cofing.js和recommend.js文件,在config.js文件中是一些跨域访问的参数:export const commonParams = {source: 'wap' //访问时的公共参数}export const options = {param: 'callback'}export const ERR...
·
1.首先在src目录下建立一个api目录,下面建立cofing.js和recommend.js文件,在config.js文件中是一些跨域访问的参数:
export const commonParams = {
source: 'wap' //访问时的公共参数
}
export const options = {
param: 'callback'
}
export const ERR_OK = 0; //访问成功时的状态码
2.在recommend.js下:
import jsonp from '../common/js/jsonp';
import { commonParams, options } from './config';
export function getRecommend() {
const url = 'http://www.yinyuetai.com/mv/get-bigpic'; //跨域请求的地址
const data = Object.assign({}, commonParams, {
platfrom: 'h5'
});
return jsonp(url, data, options);
}
3.在webpack.base.conf.js文件中配置文档入口(module.export中的resolve的alias中配置):
'api': resolve('src/api')
4.在需要使用数据的组件中(recommend.vue):
<script>
import {getRecommend} from '../../api/recommend';
import {ERR_OK} from '../../api/config'
export default {
created() {
this._getRecommend();
},
methods: {
_getRecommend() {
getRecommend().then((res) => {
console.log(res.bigPics);
});
}
}
}
</script>
更多推荐
已为社区贡献5条内容
所有评论(0)