Loading static files like image, css and js files via Spring
Cloud Zuul Proxy is tricky part.
We will place our static resources under src- main –
resources – static folder.
If we run our spring boot application, we can able to access
the static resources present under src- main – resources – static folder.
But same spring boot application when we are trying to
access via Zuul proxy we will get
GET http://<host>/js/welcome.js?v=1539843529723
net::ERR_ABORTED 404 error
In order to resolve this issue, one work around is to place all your
static file under application-name/ application context configured in gateway
application.
For example, in your gateway application you configured your
spring boot application(demo) in application.properties file as follows
zuul.routes.demo.url=http://localhost:8091
But your static resources like img,css and js files are present under
src- main – resources – static
folder.
Then create folder named demo under src- main – resources – static and then place all your static files
under “demo” folder
So, when configuring zuul proxy we need place all our static
resources under src-main-resources-static-<application.name>(folder)
One more alternative approach which I found was
Creating a mapping in your gateway applications application.yml file as shown below
zuul:
routes:
demo-viewer:
path: /demo-viewer/**
url: http://localhost:9099
strip-prefix: true
demo-viewer-img:
path: /demo/**
url: http://localhost:9099
strip-prefix: false
demo-viewer-boot:
path: /bootstrap*/**
url: http://localhost:9099
strip-prefix: false
demo-viewer-jquery:
path: /jquery*/**
url: http://localhost:9099
strip-prefix: false
server:
port: 8080
ribbon:
eureka:
enabled: false
As you see, I have mentioned above mapping in my application.yml file. Here I am explicitly mapping route for my static resources like img, jquery and bootstrap
One more alternative approach which I found was
Creating a mapping in your gateway applications application.yml file as shown below
zuul:
routes:
demo-viewer:
path: /demo-viewer/**
url: http://localhost:9099
strip-prefix: true
demo-viewer-img:
path: /demo/**
url: http://localhost:9099
strip-prefix: false
demo-viewer-boot:
path: /bootstrap*/**
url: http://localhost:9099
strip-prefix: false
demo-viewer-jquery:
path: /jquery*/**
url: http://localhost:9099
strip-prefix: false
server:
port: 8080
ribbon:
eureka:
enabled: false
As you see, I have mentioned above mapping in my application.yml file. Here I am explicitly mapping route for my static resources like img, jquery and bootstrap
If any one knows better alternative, please suggest in
comments.
Hope it helps!