当我们访问某些接口的时候，解决了接口跨域问题，然而又出现了图片403禁止访问问题
这种设计，是api厂商正常保证自己的服务器不被刷流量
解决这个问题的姿势
利用这个网站来处理给你返回的图片api地址
https//image.weserv.nl/?url=imgurl
在你的图片前面加上这个链接 ‘https://images.weserv.nl/?url...’
使用方法：把api图片连接提取出来，使用下面方法过滤
<div>图片：<img :src="item.img" :alt="item.hero_title"></div>
getImage(url){
console.log(url);
// 把现在的图片连接传进来，返回一个不受限制的路径
if(url !== undefined){
return url[0].replace(/http\w{0,1}:\/\/p/g,'https://images.weserv.nl/?url=p');
}
}
整个组件代码
配置代理
proxyTable: {
'/v1': {
target: 'http://hero.shudong.wang/',
changeOrigin: true
},
'/api': {
target: 'https://news-at.zhihu.com/',
changeOrigin: true,
pathRewrite: {
'^/api': '/api/4'
}
}
},
每次访问 localhost:8080/api/news/latest
pathRewrite: {
'^/api': '/api/4'
}
每次遇到 以api 开头的url ，自动转化成 api/4
api/news/latest -> api/4/news/latest
相当于https://news-at.zhihu.com/api/4/news/latest
<template>
<div>
<div v-for="(item,index) in stories" :key="index">
<div>名字：{{item.title}}</div>
<div>描述：{{item.ga_prefix}}</div>
<div>图片：<img :src="getImage(item.images)" :alt="item.title"></div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data(){
return{
stories:{}
}
},
created(){
this.getHero()
},
methods:{
getHero(){
// https://news-at.zhihu.com/api/4/news/latest
// axios.get('http://hero.shudong.wang/v1/db.php')
axios.get('/api/news/latest')
.then(res=>{
this.stories = res.data.stories;
})
},
getImage(url){
console.log(url);
// 把现在的图片连接传进来，返回一个不受限制的路径
if(url !== undefined){
return url[0].replace(/http\w{0,1}:\/\/p/g,'https://images.weserv.nl/?url=p');
}
}
}
}
</script>
