关于若依框架（前后端隔离版本）图片映射问题的解决方法（解决跨域问题，配置代理路由）

电玩女神 2024-03-17 16:21 7阅读 0赞

## 前端设计 ##

开发代理：

在 vue 项目内的 `vue.config.js` 配置文件内配置 `devserver` 配置，在 proxy 参数内配置两个代理路径，如

proxy: {
        
          // detail: https://cli.vuejs.org/config/#devserver-proxy
          // 后端接口代理路径
          [process.env.VUE_APP_BASE_API]: {
        
            target: `http://localhost:8080`,
            changeOrigin: true,
            timeout: 3*60*1000, //设置超时
            pathRewrite: {
        
              ['^' + process.env.VUE_APP_BASE_API]: ''
            }
          },
          // 图片映射代理路径
          [process.env.VUE_APP_STATIC_API]: {
        
            target: `http://localhost:8080`,
            changeOrigin: true,
            timeout: 3*60*1000, //设置超时
            pathRewrite: {
        
              ['^' + process.env.VUE_APP_BASE_API]: '/'
            }
          },
          }

生产代理：

在`nginx` 配置文件`nginx.conf`内配置 图片代理路由，类似 `/proc-api/` 一样的路由

## 后端设计 ##

参考如下链接，去配置后端图片映射路径

## 参考链接 ##

[1. addResourceHandler配置静态资源映射本地文件  
][1. addResourceHandler_]

[2. springboot中配置addResourceHandler和addResourceLocations，使得可以从磁盘中读取图片、视频、音频等  
][2. springboot_addResourceHandler_addResourceLocations_]

[1. addResourceHandler_]: https://blog.csdn.net/qq_45593068/article/details/120267292
[2. springboot_addResourceHandler_addResourceLocations_]: https://blog.csdn.net/ajklaclk/article/details/80804137