Problem with fixing CORS, lost header issue

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:
image

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.

Hey,

Could you open a support ticket via the “Contact Support” form in the dashboard? I’d like to look at your backend service and CORS settings further.

Jérémy.
Render Support, UTC+3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.