CORs error when connecting Azure Spring Apps Backend to Frontend

Question

I built a few spring boot microservices and spring-cloud gateway and was looking to deploy them somewhere. I followed this tutorial: https://learn.microsoft.com/en-us/azure/spring-apps/quickstart-sample-app-introduction?tabs=enterprise-plan&pivots=programming-language-java closely. I was able to deploy all my microservices and spring-cloud gateway on the spring apps instance.

However, I kept facing CORS errors when I was integrating my Vue.js frontend to the spring-cloud gateway. I am using the public url assigned. I am aware of what CORS is, but I am not sure how to fix it. I have looked at most of the documentation, but could not find anything helpful. I am on the Standard pricing tier.

Answer 1

Srikar Mahankali Thanks for posting your question in Microsoft Q&A. From the description above, you are using Standard pricing tier and I assume you followed https://github.com/Azure-Samples/spring-petclinic-microservices sample in implementing microservices as well as spring cloud gateway.

If so, you need to 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 tutorial for detailed instructions.

In the pet clinic sample, add the CORS properties in https://github.com/Azure-Samples/spring-petclinic-microservices/blob/azure/spring-petclinic-api-gateway/src/main/resources/application.yml to allow public URL of the front-end application.

I hope this helps and let me know if any questions.

---

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.