Webpack开发环境下JHipster应用定时下载的静态图片无法访问

这个问题的核心是JHipster开发模式的前后端分离架构导致的：开发时前端通过yarn start跑在localhost:9000（基于webpack-dev-server），后端通过mvnw跑在localhost:8080，前端默认只代理/api这类业务请求到后端，而你的/images路径请求会直接被前端服务器处理，但前端目录里并没有定时任务下载的图片，所以访问失败；而打包成war后，前后端合并为一个单体应用，后端容器（比如内嵌Tomcat）会处理所有请求，包括静态资源，因此localhost:8080/images/...能正常访问。

下面给你几个可行的解决方案：

方案一：配置前端代理转发/images请求到后端 #

这是最推荐的方式，能让你在开发时继续用localhost:9000访问图片：

1. 找到项目根目录下的proxy.conf.js文件（JHipster 4.x版本的代理配置文件）
2. 在现有代理配置中添加/images的转发规则，修改后的文件示例如下：

module.exports = {
  '/api': {
    target: 'http://localhost:8080',
    secure: false
  },
  '/management': {
    target: 'http://localhost:8080',
    secure: false
  },
  '/swagger-resources': {
    target: 'http://localhost:8080',
    secure: false
  },
  '/images/**': { // 新增这个转发规则
    target: 'http://localhost:8080',
    secure: false
  }
};

3. 重启yarn start，现在访问localhost:9000/images/FOO/someimage-0.png时，请求会被自动代理到后端8080，就能正常获取图片了。

方案二：开发时直接访问后端端口的图片路径 #

如果你不想修改代理配置，也可以直接用后端的localhost:8080/images/FOO/someimage-0.png访问图片，绕开前端代理直接请求后端的静态资源服务，同样能正常访问。

方案三：调整图片存储位置到前端静态目录（不推荐） #

你可以把定时任务下载的图片存储到前端的静态资源目录（比如src/main/webapp/images），但这种方式存在两个明显问题：

• 定时任务写入前端目录可能会触发webpack的文件监听机制，导致前端频繁重载，严重影响开发体验
• 生产环境的存储路径需要额外调整，增加了配置复杂度

补充说明 #

打包成war后，后端容器会接管所有静态资源请求，所以localhost:8080/images/...能正常访问；而此时你没有运行yarn start，localhost:9000根本没有服务在运行，自然无法访问。

内容的提问来源于stack exchange，提问作者Jaym