Container Instance running Spring Boot CORS Error

Question

Container Instance running Spring Boot CORS Error

Anonymous

So I am running a Container Instance with docker that loads a Spring Boot backend to which I am supposed to be able to make API calls, but I am getting a CORS error.

Access to fetch at 'http://[Azure Container Instance Public IP]:8080/api/puzzle/get/3a2a1397-2a7e-4df9-8f27-16671f3cbd61/0' from origin 'http://localhost:3000' 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.

For my CORS configuration in Spring Boot I have allowed origins localhost:3000, [My local machine public IP] and [My local machine public IP]:3000. and my React application sends forward the origin http://localhost:3000.

I am using a React application to connect to the Azure service, but it does not work. When I copy the exact same set up to my local machine and port forward everything, I am getting no issues at all. Ports 80 and 8080 are enabled on Container Instance in Azure.

Why does Azure give me these issues?

Ravi Kanth Koppala 3,471 Reputation points Microsoft Employee Moderator

2022-12-16T04:35:23.813+00:00

@Anonymous ,
CORS (Cross-Origin Resource Sharing) is a security feature implemented by web browsers that blocks web pages from making requests to a different domain than the one that served the web page. This is done to prevent malicious websites from making unauthorized requests on behalf of the user. In your case, the error message is indicating that the web page running on http://localhost:3000 is trying to make a request to http://[Azure Container Instance Public IP]:8080/api/puzzle/get/3a2a1397-2a7e-4df9-8f27-16671f3cbd61/0, but the server at http://[Azure Container Instance Public IP]:8080 is not including the Access-Control-Allow-Origin header in its response, which is required for the browser to allow the request.

To fix this issue, you will need to configure your server to include the Access-Control-Allow-Origin header in its response for requests from http://localhost:3000. This can typically be done by adding a filter or a handler to your server-side code that sets the Access-Control-Allow-Origin header to the appropriate value.
Anonymous

2022-12-16T06:32:01.77+00:00

You see, I already have added the IPs as origin in my server (Read paragraph after error). This is a specific problem that combines Docker, Azure, Spring Boot and React.

I know what CORS is and does. It works if I port forward my Spring Boot application and connect to it that way.