How to fix CORS error?

Question

How to fix CORS error?

Uroš Gavrilović 30

Hi all, pretty new here. This is my first time using Azure. I created static web page where I deployed my React app and created spring app service where I deployed another app, spring boot. Whenever I send a HTTP request from my React app (https://delightful-stone-0033d2303.3.azurestaticapps.net/) to my back-end in Spring Boot (https://fitmaster-server.azuremicroservices.io), I get CORS error. I don't get CORS errors on my localhost. Is this caused by my faulty back-end or do I need to somehow enable it in some Azure options menu? Thanks.

Accepted answer

1 additional answer

Your answer

Answer 1

MuthuKumaranMurugaachari-MSFT 22,421

Uroš Gavrilović Thanks for posting your question in Microsoft Q&A. CORS is a security feature implemented by web browsers that restricts 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 accessing sensitive data from other websites. When you try to make a request from your React app to your Spring Boot app, the browser blocks the request because it is coming from a different domain.

It looks like you haven't configured CORS in your Azure Spring Apps? Check out Configure cross-origin resource sharing doc and configure CORS for origin such as https://delightful-stone-0033d2303.3.azurestaticapps.net/ and needed methods and headers to be allowed in Spring Apps.

Similarly, you can also configure CORS for Static Web apps so that it can be accessed from different domains (if needed) and refer https://learn.microsoft.com/en-gb/azure/static-web-apps/configuration#global-headers doc for more info.

I hope this helps and if you have any questions, let me know. Note: This answer is partially generated based on AI tools.

If you found the answer to your question helpful, please take a moment to mark it as Yes for others to benefit from your experience. Or simply add a comment tagging me and would be happy to answer your questions.

Uroš Gavrilović 30 Reputation points

2023-10-17T23:04:44.3733333+00:00

Hi, thank you for your answer. I've already allowed all origins in the Java code, yet somehow I get CORS error. I see that Azure can override those settings. I don't see CORS menu on the left side (blade) in Azure Spring Apps service. Is there a workaround? Also, do I need to only enable it on the backend, or do I need to edit front-end too? Thanks.
MuthuKumaranMurugaachari-MSFT 22,421 Reputation points

2023-10-18T01:50:53.5333333+00:00

Uroš Gavrilović In your Spring apps, do you have spring cloud gateway enabled? For example, if you are using Azure Spring Apps Enterprise plan, by following the Configure cross-origin resource sharing doc, you can see CORS option as shown below in the portal:

For other plans, wondering if you have built a Spring Cloud gateway like described Build a Spring Cloud Gateway. Here you can configure application with spring.cloud.gateway.globalcors.corsConfiguration to allow CORS requests to the gateway and refer https://github.com/microsoft/azure-spring-apps-training/blob/master/08-build-a-spring-cloud-gateway/README.md#configure-the-application. Have you already configured this in your application (full code sample for reference)?

I assume you are making a request from Static Web Apps to Azure Spring Apps and the error was returned by Azure Spring Apps. correct? in such case, you need to add CORS policy in Spring Apps (allowed origins: Static Web Apps URL).

If it does not help, please share more details about the full error message including stack trace, Spring Apps plan, etc. I will connect with you offline if needed to assist further.
Uroš Gavrilović 30 Reputation points

2023-10-18T23:02:55.76+00:00

Ahh, so that explains why I didn't have that blade with Spring Cloud Gateway on Azure. I'm not Enterprise package. I tried adding those libraries and setting up my application.properties (https://github.com/uros-gavrilovic/fitmaster-server/blob/deployment/src/main/resources/application.properties) but to no avail. Before that, I used simple CORS filter (https://github.com/uros-gavrilovic/fitmaster-server/blob/deployment/src/main/java/com/mastercode/fitmaster/config/WebConfig.java) but that didn't help too. Do you have any ideas what could be going on? I feel like I'm so close to finally deploying my app but truth be told, I never actually did this outside of localhost so that's why I'm struggling. Thank you for your comments already, they are so helpful! :)

EDIT: Here's my front-end (https://victorious-flower-0f7326e10.3.azurestaticapps.net/) and here's my back-end (https://fitmaster-server.azuremicroservices.io/). When you try to log-in with any information, you'd get CORS error (and even before that with app-info request).
Uroš Gavrilović 30 Reputation points

2023-10-19T09:43:36.33+00:00

Somehow, or even better, somewhy, my app now accepts CORS. For the life of me I don't know what I did. I made sure to mvn package everytime I did something new and deploy that newest version of JAR but now it works out all of a sudden and I did not do any changes. I've deleted those Spring Cloud libraries and such from your last comment since I figured out that my WebConfig corsFilter actually works, but nevertheless your links to documentation and screenshots explained to me that I needed Enterprise to do the stuff other people did on YouTube tutorials. Thank you, marked as an answer. Just wish I could really explain what I did to fix this so other people finding this could use answer. :D
MuthuKumaranMurugaachari-MSFT 22,421 Reputation points

2023-10-19T12:13:33.3366667+00:00

Uroš Gavrilović Appreciate sharing all the information. Feel free to reach out if any questions.

Answer 2

Konstantinos Passadis 19,496 MVP

Hello @Uroš Gavrilović

Please try to add this in your code

app.use(cors({
  origin: 'https://victorious-flower-0f7326e10.3.azurestaticapps.net'
}));

If your client-side request includes methods other than GET or headers other than the basics, you need to set Access-Control-Allow-Methods and Access-Control-Allow-Headers on your server.

I had a similar problem in React and came down to the actual code !

Also : https://stackoverflow.com/questions/49049312/cors-error-when-connecting-local-react-frontend-to-local-spring-boot-middleware

I hope this helps!

Kindly mark the answer as Accepted and Upvote in case it helped!

Regards

Uroš Gavrilović 30 Reputation points

2023-10-19T09:45:53.8266667+00:00

Hi, thank you for your help. I managed to fix it somehow on my own, and I'm not really sure what I did but my backend webconfig now works. Cheers.

Share via

How to fix CORS error?

1 additional answer

Your answer