【前端】解决访问api图片403禁止访问问题

当我们访问某些接口的时候，解决了接口跨域问题，然而又出现了图片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>