一个简单的方法解决外网图片跨域或者403问题

有时候，我们需要访问一些网站图片的时候，会出现403或者跨域的错误，类似这样的：

其实这个链接 图片 单独在浏览器打开是可以的，但是你在你本地请求就会被限制住，类似这样：

<img src="https://i1.hdslb.com/bfs/face/c81aefc06ea40d7a7005b2d219d8219332cf529d.jpg" alt="" style="50px"></div>

这是为什么呢？

因为网站有同源策略，或者某些网站干脆限制了你本地访问，遇到localhost或者127.0.0.1的请求直接返回403。

那我们想在本地请求这个图片怎么办？很简单，我们需要后端设置一个代理接口，帮我们做一次透传，因为后端请求这个图片的数据是没有限制的。

具体代码如下：

写一个代理下载的接口（基于Springboot）：

@GetMapping("/img/{proxy}")
public void getImg(@PathVariable String proxy, HttpServletResponse response) throws Exception {
    String url = new String(Base64.getDecoder().decode(proxy), StandardCharsets.UTF_8);
    ResponseEntity<byte[]> responseEntity = new RestTemplate().exchange(url, HttpMethod.GET, null, byte[].class);
    //获取entity中的数据
    byte[] body = responseEntity.getBody();
    //创建输出流  输出到本地
    OutputStream os = response.getOutputStream();
    os.write(body);
    os.flush();
    //关闭流
    os.close();
}

这里其实就是通过base64对图片的链接进行一次编码，然后在这个接口里解码，然后拿到这个图片的url去请求图片，获取到图片后再通过response写出到浏览器，从而实现文件的访问。

为什么这个接口可以请求图片而不跨域呢？因为这个是我们自己写的接口，我们可以自己设置跨域允许，请把下面这个类加到你的后端项目里去【必须】：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

这个类就是设置全局接口跨域可访问，这样前端本地在请求数据的时候就不会限制了。

然后前端在请求图片的时候做一个处理：

const img = 'http://localhost:8080/img/' + window.btoa('http://i1.hdslb.com/bfs/face/c81aefc06ea40d7a7005b2d219d8219332cf529d.jpg')  // 对图片链接进行base64加密，再请求刚才后端那个接口，拿到图片

<img :src="img" style="width: 50px;">

http://localhost:8080/img/xxx 就是后台刚才写的接口，这里的参数是 base64处理后的图片url地址。

设置完之后就可以看到效果了：

图片出来了，这是目前我想到的比较简单的访问外网图片或者资源的方式，思路就是自己写个后台接口做一层转发就行了，大家有好的建议可以告诉我一起学习~

我是程序员青戈，欢迎你关注我跟我一起学习。