Nuxt2+SpringBoot实现图片的代理访问

概述

该项目的图片在数据库中之前直接是一个完整的http链接，因此数据从接口响应给前端，前端直接通过<img :src=”item.coverUrl” class=”poster” />就能访问图片，但是现在图片要从我们自己的本地拿了，因此需要修改我们的项目。

场景了解

目前我的图片是在 D盘的uploads下，幽络源希望前端通过 域名+/uploads/图片名.png 来访问图片。

前端是Nuxt2，后端是SpringBoot。

教程步骤

1、后端配置图片映射

SpringBoot项目中，新建config包，建立WebConfig.java，代码如下

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 将 /uploads/** 映射到 D盘的uploads
        registry.addResourceHandler("/uploads/**")
                .addResourceLocations("file:D:/uploads/");
    }
}

2、修改数据库中图片的地址形式

在之前，幽络源这里数据表中的图片是一个http形式的，现在修改为 /upload/图片 的形式，如图

3、Nuxt引入代理模块

前端项目中终端执行如下命令下载代理模块

npm install @nuxtjs/proxy

4、配置 nuxt.config.js

关键配置如下，一个是注册proxy的modules，二个是配置代理

export default {
  // 注册模块
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  proxy: {
    // 将 /uploads/** 请求代理到 http://localhost:8080/api/uploads/**
    '/uploads/': {
      target: 'http://localhost:8080',
      pathRewrite: { '^/uploads/': '/api/uploads/' },
      changeOrigin: true
    }
  },
}

如图

5、查看效果并解释下为什么这样配置

如下图，在后端的整体上下文路径配置的是/api，然后图片映射配置的是 /uploads

此时我本地D盘的uploads目录下有图片，如图

以video.png为例，启动后端，然后直接在浏览器手动访问图片，结合yaml和图片映射配置可知，这里应当访问

localhost:8080/api/uploads/video.png，如下图可以看到图片能显示，这证明了我们的后端是没问题的

然后图片在数据库的地址是 /uploads/blog.png ，这个地址数据会直接返回给前端的 img 标签使用，最后会成为发起 localhost:3000/uploads/blog.png，而我们的proxy配置则是将 /uploads路径的请求重写为了 localhost:8080/api/uploads，最终成为访问 localhost:8080/api/uploads/blog.png，也就真正的能访问到图片了，如图

结语

如上为幽络源的“Nuxt2+SpringBoot实现图片的代理访问”教程，如对网站开发感兴趣的小伙伴可以加入我们的QQ群307531422交流学习、