01
CORS in
JavaScript
(Must have Understand full stack developers)
02
What is CORS?
CORS (Cross-Origin Resource Sharing)
This is browsers to control how web pages can
request resources (e.g., API data) from a different
domain (cross-origin).
et index.html
G
Same origin(domain)
xdomain.com
Get
font
.wof
f
Client
Acce
ss-co
ntrol-
allow
-orig cross origin(domain)
in:* ydomain.com
@KaliyappanRangan https://kaliyappan-r.web.app
03
What is Cross-Origin?
Origin refers
Protocol (e.g., http, https)
Domain (e.g., example.com)
Port (e.g., :80, :443)
cross-origin when the web page running on one origin
(say, https://example.com) tries to access a resource
(like an API) on another origin (say,
https://api.anotherdomain.com).
@KaliyappanRangan https://kaliyappan-r.web.app
04
Client Request
fetch('https://api.anotherdomain.com/data', {
method: 'GET',
mode: 'cors'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
Server Response
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type
@KaliyappanRangan https://kaliyappan-r.web.app
Portfolio - https://kaliyappan-r.web.app
Email - [email protected]
Mobile - +91 63826 89586
Follow for more
