【前端】解决访问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>

转载于：https://segmentfault.com/a/1190000011628835 感谢大佬