當(dāng)我們訪問某些接口的時(shí)候，解決了接口跨域問題，然而又出現(xiàn)了圖片403禁止訪問問題
這種設(shè)計(jì)，是api廠商正常保證自己的服務(wù)器不被刷流量
解決這個(gè)問題的姿勢
利用這個(gè)網(wǎng)站來處理給你返回的圖片api地址
https//image.weserv.nl/?url=imgurl
在你的圖片前面加上這個(gè)鏈接 ‘https://images.weserv.nl/?url...’
使用方法：把a(bǔ)pi圖片連接提取出來，使用下面方法過濾
<div>圖片：<img :src="item.img" :alt="item.hero_title"></div>
getImage(url){
console.log(url);
// 把現(xiàn)在的圖片連接傳進(jìn)來，返回一個(gè)不受限制的路徑
if(url !== undefined){
return url[0].replace(/http\w{0,1}:\/\/p/g,'https://images.weserv.nl/?url=p');
}
}
整個(gè)組件代碼
配置代理
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 ，自動(dòng)轉(zhuǎn)化成 api/4
api/news/latest -> api/4/news/latest
相當(dāng)于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);
// 把現(xiàn)在的圖片連接傳進(jìn)來，返回一個(gè)不受限制的路徑
if(url !== undefined){
return url[0].replace(/http\w{0,1}:\/\/p/g,'https://images.weserv.nl/?url=p');
}
}
}
}
</script>
轉(zhuǎn)載于：https://segmentfault.com/a/1190000011628835 感謝大佬
