Web Tech Mora: September 2019

Tuesday, September 24, 2019

Fixing 401 Error with CORS Preflights (with Spring boot)

When the web application runs on a different domain and the server runs on another domain, we have to deal with cross origin requests. But, if we don't know the mechanism of cross origin resource sharing (CORS), we will end up with errors like 401.

Error in brief

My Angular web application runs on port 4200, and my spring boot application runs on server on port 8080. I could not enable CORS in my backend, so, I got an error when sending a request from my application like this.

Reason

My pre-flight request is not responded with status OK(200).

Solution

I enabled CORS in my backend. To do this, there are several methods. Here in my post, I have shown the easiest way to do that. But, if you are interest in knowing other ways, click me )

By using Web Security in Spring Boot,

You have to create a web security configuration class. I hope everybody creates that class for backend authentication purposes.

If you have already created that class, inside configure(HttpSecurity httpSecurity) method ,add this line httpSecurity.cors();

It's that simple !!!

Pre-flight Request:

It's an OPTIONS- request sent to determine whether the target of the request (Server) supports the request.

Sending pre-flight requests is the first step in CORS(Cross Origin Resourse Sharing) mechanism.

Before sending the actual request, the application sends a pre-flight request to the server.
The server can then respond to the pre-flight request with a collection of headers:

Access-Control-Allow-Origin: Defines which origins may have access to the resource. A '*' represents any origin.

Access-Control-Allow-Methods: Indicates the allowed HTTP methods for cross-origin requests

Access-Control-Allow-Headers: Indicates the allowed request headers for cross-origin requests

Access-Control-Max-Age: Defines the expiration time of the result of the cached preflight request

So, if the pre-flight request doesn't meet the conditions determined from these response headers, the actual follow-up request will throw errors related to the cross-origin request ( Most probably error 401).

Friday, September 20, 2019

How to use ng-bootstrapped Popup Modals within Angular Components

Hello guys, this article is about how to add ng-bootstrapped modals within your components in Angular application. Going through this article, a very beginner can learn how to add and use different bootstrapped gadgets and other stuffs with your Angular application.

I have already created a very simple project but not yet bootstrapped. I just need to add a popup message box when clicking on the button on the page.

Below is how my application looks right now and I have used only app.component.ts and app.component.html files for this.

Initial Web Page

app.component.html

app.component.ts

Now let's begin to add the requirements to continue.

Step 1

Go to the root project folder of your project.
Install ng-bootstrap to your project by running
npm install --save @ng-bootstrap/ng-bootstrap
Go to app.module.ts file and import the Ngbmodule inside import array.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

app.module.ts

Go to index.html and copy the bootstrap CDN code snippent from bootstrap site , within the scope of <head></head> tags.
( For now, <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> )

Step 2

Go to ng-bootstrap site and find the bootstrap code section for Modal.(Modal-ng-bootstrap)

Section for Modals

Within the section I have circled in , when you click the button with name "</>Code", you can find a code file with the name modal-component.ts with the following code snippet.

Here , in the above code, you can find two classes as NgbdModalContent (squared in red colour) and NgbdModalComponent (squared in purple colour).
Now it's time to copy code from this snippet and paste it into your app.component.ts file.
First, import the modules shown in Section 1 in the above image into your app.component.ts file.
Secondly, Copy the whole code in section two and paste it at the very end of the app.component.ts file.
Thirdly, inject the service into the constructor of your AppComponent class in app.component.ts file ,as shown in section 3 .
And, Lastly, Copy the method "copy()" shown in the section 4 as a netive method of the AppComponent class.
This method can be used in an (click) event within the button in html file now.

Step 3

Enter NgbdModalContent class in declarations array as well as an entryComponent in app.module.ts file.

app.module.ts

Finally

This is my app.component.ts file and html file .

app.component.ts

app.component.html

Final View when clicked on the button on the page,

Enjoy bootstrap!!!

Web Tech Mora

Pages