51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

vue引入网络图片跨域问题

vue请求网络接口中图片报错403解决办法 {#vue请求网络接口中图片报错403解决办法}

造成原因: {#造成原因:}

网络接口都是有请求限制的,特别是图片字段值是绝对路径的情况,请求的时候就会报错403 forbidden。

解决办法: {#解决办法:}

方法一: {#方法一:}

这个时候应该使用缓存的方式拿到请求图片的地址进行缓存,只要在请求到的图片链接前面加上https://images.weserv.nl/?url=即可(这是一个专门缓存图片的网址

|---------------------------------------------------------------------------------------------------------------------------------------------| | getImages( _url ){ if( _url !== undefined ){ let _u = _url.substring( 7 ); return 'https://images.weserv.nl/?url=' + _u; } } 123456 |

_u:提取http://后面的部分
_url:是请求接口后返回的图片字段

方法二: {#方法二:}

index.html 中增加一个meta标签,不发送HTTP Referer首部

|------------------------------------------------------| | <meta name="referrer" content="no-referrer"> |

记得一定要重启服务,不然无法生效

赞(0)
未经允许不得转载:工具盒子 » vue引入网络图片跨域问题