I have two apps: Spring Boor server and a Vue.js frontend app. When trying to send get request, I encountered the error message “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” I resolved this issue by adding a filter on the backend:
@WebFilter("/*")
public class AddResponseHeaderFilter implements Filter {
@Override
public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException {
HttpServletResponse httpServletResponse = (HttpServletResponse) response;
httpServletResponse.setHeader(
"Access-Control-Allow-Origin", "*");
httpServletResponse.setHeader(
"Dupa", "dupa");
chain.doFilter(request, response);
}
@Override
public void init(FilterConfig filterConfig) throws ServletException {
// ...
}
@Override
public void destroy() {
// ...
}
It works as expected on localhost, and headers are added successully:
The problem is when using Render. I’m using the same code, only changing the addresses for the endpoints. Headers are missing, so there is a CORS error in console.
It seems that Render somehow removes the header added by my server. Is this possible? Could it be due to the cloudflare server? Somewhere, the header that is added from my code seems to be getting lost. Is there any solution?
I have tried all the CORS error solutions on Stack Overflow and here. None of them have worked so far. It works locally, but it doesn’t work through Render.