I get this error every time i try to call an endpoint: CORS header ‘Access-Control-Allow-Origin’ missing

[ForyouHQ]

I am using a Spring Boot backend which I want to call to from my React frontend.
I am using this GlobalConfig file:

@Configuration
@EnableWebMvc
public class GlobalConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry corsRegistry) {
        corsRegistry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

But every time i make the call to the endpoint from the frontend i get this error:

POST
https://foryou-server-test.onrender.com/api/v1/auth/signIn
CORS Missing Allow Origin

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://foryou-server-test.onrender.com/api/v1/auth/signIn. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 403.

Error: TypeError: NetworkError when attempting to fetch resource.

I’ve tried everything i could think of to fix this error but nothing seems to work. No matter what i try it seems the Access-Control-Allow-Origin just does not get passed. I’ve had this problem before with another project and that got fixed by using this global config but I don’t know why it won’t work this time.

It works fine on my localhost:

But for some reason it does not work when deployed on Render.

[Keith]

Hi there,

I believe this issue was happening because when you deploy a Java service on Render you need to use Docker. It is highly recommended that you build your service in your Dockerfile and don’t rely on built artifacts being pushed to Git. If you forget to build your service locally you will not see the changes on Render.

Regards,

Keith
Render Support, UTC+10