I'm trying to load a wav file from the server but I get a CORS error. I've been wandering for 3 days without being able to solve it. Please help me..
This is the code I am trying to run. I am trying to convert wav file to blob.
var srcStr = "http://118.129.180.214:28934/campHistory/2022/12/13/14/wavFileName.wav";
fetch(srcStr)
.then(response => response.blob())
.then(console.log);
http://118.129.180.214:28934/campHistory/2022/12/13/14/wavFileName.wav
>> address to which the request is sent
<Context path="/campHistory" docBase="/var/logs/recordings"></Context>
The server side is using spring boot security, and the route mapping is done as follows in server.xml of tomcat, so the actually requested route is as follows.
http://118.129.180.214:28934/var/logs/recordings/2022/12/13/14/wavFileName.wav
How can I request a wav file from the server and convert it to a blob?
Access to fetch at 'http://118.129.180.214:28934/campHistory/2022/12/13/14/ymoons_20220106_171634_20221213_142729_01035510793_3747.wav' from origin 'http://localhost:8182' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Since there was no Access-Control-Allow-Origin, I added the following filter on the server side and set it to allow everything.
@Component
@Order(Integer.MIN_VALUE)
public class CORSFilter implements Filter{
private static final Logger log = LoggerFactory.getLogger(CORSFilter.class);
@Override
public void init(FilterConfig filterConfig) throws ServletException {
// TODO Auto-generated method stub
}
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Method","GET");
response.setHeader("Access-Control-Max-Age","3600");
response.setHeader("Access-Control-Allow-Headers","*");
chain.doFilter(req, res);
}
@Override
public void destroy() {
// TODO Auto-generated method stub
}
}
Still getting the same error... So, when I checked the network tab of the developer tools, the 'Access-Control-Allow-Origin' information was not included in the header despite the settings as above.
Why is that?... I don't know why there is no value in the response header when I request a wav file.
How can I request a wav file from the server and convert it to a blob?