vue 解决jsonp跨域

之前有篇文章是关于axios,解决跨域请求的文章,但是在后来的一个demo中,突然发现,出现报错,很多图片不能加载,总共请求20张,13个报错.....我的内心一万只草泥马在奔腾

image.png

设置请求头Content-Type='application/json;charset=UTF-8'无效
axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'

后来查了下,axios不支持jsonp跨域!!!!
纳尼!

参考了这篇文章vue jsonp解决跨域处理终于解决了问题,感谢!

1.首先安装依赖
cnpm i -S vue-jsonp
2.在main.js中导入vue-jsonp
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
通过use方法，挂载到vue中
vue.use(VueJsonp)
3.请直接看代码

<template>
  <div class="posturl">
    <div >
    <ul class="row">
      <li class="m-lst" v-for="(value,index) in hotMovie">
        <div>
          <img class="img-responsive center-block" :src="value.images.medium" />
        </div>
        <div class="caption">
          <h4 class="h4 text-center" :title="value.title">{{value.title}}</h4>
          <p class="m-casts">
            <i class="glyphicon glyphicon-user"></i>
            <a class="u-cast" :href="val.alt" v-for="val in value.casts">{{val.name}}</a>
          </p>
          <p class="m-genres">
            <i class="glyphicon glyphicon-tags"></i> 
            <span class="text-danger u-genres" v-for="val in value.genres">{{val}}</span> </p>
          <p class="m-time"><i class="glyphicon glyphicon-time"></i><span class="text-success u-time">{{value.year}}</span>
          </p>
          <p class="text-right"><a href="03-detail.html" class="btn btn-info" @click="link(value.id)">查看详情</a>
          </p>
        </div>
      </li>
    </ul>
  </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hotMovie: []
    }
  },
  created() {
    let url = "https:/api.douban.com/v2/movie/in_theaters";
    this.$jsonp(url, {
      params: {
        count: 20,
        start: 0
      }
    })
      .then(res => {
        // console.log(res.data.subjects);
        this.hotMovie = res.subjects
      })
      .catch(error => {
        console.log(error);
      })
  }
}
</script>
<style scoped>
</style>

然后就不再报错了

image.png

具体请看代码:
https://github.com/ZYmooon/vuedemo-study/tree/master/axios

如果解决了你的问题,请麻烦给个star,谢谢