Scribd
Upload
5 views3 pages

MPTPR 20

The document explains the concept of Cross-Origin Resource Sharing (CORS) and its importance for Angular applications that communicate with APIs on different domains. It provides a step-by-step guide to create a new Angular component that makes a CORS request, including code snippets for the component and necessary configurations. Enabling CORS on the API server-side is essential for successful communication between the Angular application and the API.

Uploaded by

harshkapupara2007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views3 pages

MPTPR 20

The document explains the concept of Cross-Origin Resource Sharing (CORS) and its importance for Angular applications that communicate with APIs on different domains. It provides a step-by-step guide to create a new Angular component that makes a CORS request, including code snippets for the component and necessary configurations. Enabling CORS on the API server-side is essential for successful communication between the Angular application and the API.

Uploaded by

harshkapupara2007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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 cors-example.component.ts 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: './cors-example.component.html',
styleUrls: ['./cors-example.component.css']
})
Compiled by: AHH Page
Modern Practical Tools(4340705) 20______

export class CorsExampleComponent {


responseData: any;
errorMessage!: string;

constructor(private http: HttpClient) { }

makeCorsRequest() {
const url = 'http://localhost:3000/products'; // Replace with the desired API endpoint

this.http.get(url).subscribe(
(response) => {
this.responseData = response;
this.errorMessage = "";
},
(error) => {
this.responseData = null;
this.errorMessage = error.message;
}
);
}
}

Step 3: In the cors-example.component.html 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 app.module.ts 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 './app-routing.module';


import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';


import { CorsExampleComponent } from './cors-example/cors-example.component';

@NgModule({
declarations: [
AppComponent,
CorsExampleComponent
],
imports: [
BrowserModule,
AppRoutingModule,HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step5: Open the app.component.html file and replace its content with the following line:

<app-cors-example></app-cors-example>

Compiled by: AHH Page

You might also like