0

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.

network capture

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?

Phil
  • 157,677
  • 23
  • 242
  • 245
KimJE
  • 19
  • 1

0 Answers0