Fixing CORS error when integrating Angular 7 and Play Framework 2.7
When using Angular as the frontend and Play Framework as the backend/services of your application running on different servers, communication between them would cause the CORS problem. This approach would help in solving it. Fork or clone the java based project and start developing.
Project : https://github.com/anjulapaulus/Angular-Java-Play-Example
Are you planning on developing your web application with Angular? Awesome!
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Reference: https://angular.io/docs
The next step is to find a good backend framework to integrate with it.
What is Play Framework?
Play Framework makes it easy to build web applications with Java & Scala. Play is based on a lightweight, stateless, web-friendly architecture. Built on Akka, Play provides predictable and minimal resource consumption for highly-scalable applications. Reference : https://www.playframework.com/
What is CORS?
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin than its own origin. Reference : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Play Framework is easy to use, fast and easy to learn. Play Framework lets you use java or scala to write an application in it. So why wait? Lets get started.
I have made a working java based project for you, if your lazy as me in going through this entire article on how to do it. Fork or clone it and get started.
Project : https://github.com/anjulapaulus/Angular-Java-Play-Example
Lets dive into the minor details if you want to do it on your own.
Follow the instructions to create a new angular application. https://angular.io/guide/quickstart
Follow the instructions to create a new play framework application. https://www.playframework.com/getting-started
Now lets take the example i have implemented to help with the integration.
Now lets go to our Angular Project!
Make the following changes..
Import ReactiveFormsModule, FormGroup, HttpClientModule and include it to the imports section.
I have created a form using [formGroup] and used (ngSubmit) to help with the form submission. Each field have been given a directive formControlName. Once the form is submitted the onSubmit() method is called in the app.component.ts.
Import HttpClient, HttpHeaders and inject HttpClient to the constructor. Define a url with the backend server address and an api end point name. A http request has to be defined in the onSubmit() method. Here i have a POST request.
Next the Play Framework Project…
Make the following changes accordingly!
Remove the code inside the application.conf located inside the folder conf and add the following play.filters.enabled += play.filters.cors.CORSFilter. Here we are enabling the CORS filter.
Add libraryDependencies += filters to build.sbt
Next we define a route/API end point in routes located in conf folder. We have to use the same API end point name we make the post request to. A method path has to be mentioned.
I have used a simple method in the HomeController.java class found in the app/controllers folder to accept a string value and print it in the terminal.
These two projects have to be run separately. These two projects will work on two different servers and then the testing could be done.
You may use different IDEs to design and develop your application. So let your mind run wild!
Project : https://github.com/anjulapaulus/Angular-Java-Play-Example
Github : https://github.com/anjulapaulus
