Modern Practical Tools(4340705) 20______
-:Practical 20:-
Aim: Design a page to implement CORS concept.
CORS stands for Cross-Origin Resource Sharing. It is a security feature implemented in
modern web browsers that restricts web pages from making requests to a different domain
or origin than the one that served the web page.
In the context of Angular, CORS is an important concept to understand because when Angular
applications communicate with APIs hosted on a different domain, CORS needs to be enabled
on the API server-side to allow the Angular application to make requests to the API.
Angular applications typically use the HttpClient module to make HTTP requests to APIs.
When a request is made to a different domain or origin, the browser will automatically send
a preflight OPTIONS request to the API to check if the requested domain or origin is allowed
to make requests to the API. If CORS is not enabled on the API server-side to allow requests
from the Angular application, the API server will respond with an error and the request will
fail.
To enable CORS on the API server-side, the API must respond with specific headers that allow
the requesting domain or origin to access the API. These headers include Access-Control-
Allow-Origin, Access-Control-Allow-Methods, and Access-Control-Allow-Headers,
among others.
In summary, CORS is an important concept to understand when building Angular
applications that communicate with APIs hosted on a different domain or origin. It is
necessary to ensure that CORS is enabled on the API server-side to allow the Angular
application to make requests to the API.
Step 1: Create a new component: Run the following command in your terminal to create
a new component:
ng g c cors-example
Step 2: In the [Link] file, define the logic for making a CORS request:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-cors-example',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
Compiled by: AHH Page
Modern Practical Tools(4340705) 20______
export class CorsExampleComponent {
responseData: any;
errorMessage!: string;
constructor(private http: HttpClient) { }
makeCorsRequest() {
const url = '[Link] // Replace with the desired API endpoint
[Link](url).subscribe(
(response) => {
[Link] = response;
[Link] = "";
},
(error) => {
[Link] = null;
[Link] = [Link];
}
);
}
}
Step 3: In the [Link] file, add a button to trigger the CORS request
and display the response:
<div>
<button (click)="makeCorsRequest()">Make CORS Request</button>
</div>
<div *ngIf="responseData">
<pre>{{ responseData | json }}</pre>
</div>
<div *ngIf="errorMessage">
<p>Error: {{ errorMessage }}</p>
</div>
Step 4: Open the [Link] file and update it with the following code
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
Compiled by: AHH Page
Modern Practical Tools(4340705) 20______
import { AppRoutingModule } from './[Link]';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './[Link]';
import { CorsExampleComponent } from './cors-example/[Link]';
@NgModule({
declarations: [
AppComponent,
CorsExampleComponent
],
imports: [
BrowserModule,
AppRoutingModule,HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step5: Open the [Link] file and replace its content with the following line:
<app-cors-example></app-cors-example>
Compiled by: AHH Page
