CORS

JavaScript

Introduction

Cross-Origin Resource Sharing (CORS) is a security feature implemented in web browsers. It restricts web pages from making requests to a domain different from the one that served the web page. This lesson aims to demystify CORS, focusing on its relevance and application in front-end development.

Understanding CORS

What is CORS?

CORS is a browser mechanism that uses HTTP headers to tell a browser to allow a web application running at one origin (domain) to have permission to access selected resources from a server at a different origin.

Why is CORS Important?

  • Security: CORS helps in preventing malicious sites from reading sensitive data from other sites.
  • Control: It allows server administrators to specify who can access their resources.

Handling CORS in Front-End Development

Scenario Without CORS

Imagine you have a website hosted at https://example.no, and it tries to make a request to https://api.weather.no. Without CORS, this would result in a security block by the browser, known as the “same-origin policy”.

Enabling CORS

To enable CORS, the server https://api.weather.no needs to include specific HTTP headers.

NOTE: CORS is a server-side mechanism. As a front-end developer, you don’t have control over the server.

Example of CORS Headers

Below is an example of how CORS headers might look like

javascript 
	// Access-Control-Allow-Origin header allows specific domains or all domains (*) to access the resources.
	Access-Control-Allow-Origin: https://example.no
	
	// Additional headers might include methods allowed and headers accepted.
	Access-Control-Allow-Methods: POST, GET, OPTIONS
	Access-Control-Allow-Headers: Content-Type

Front-End Implementation

Making a CORS Request

Let’s create a JavaScript function to make a CORS request.

javascript 
	// Function to make a GET request to the API
	function fetchWeatherData() {
	    fetch('https://api.weather.no/data')
	        .then(response => response.json())
	        .then(data => console.log(data))
	        .catch(error => console.error('Error:', error));
	}
	
	fetchWeatherData(); // Calling the function to make the request
  • fetch('https://api.weather.no/data'): Sends a request to the weather API.
  • .then(response => response.json()): Parses the JSON response.
  • .then(data => console.log(data)): Handles the data received from the API.
  • .catch(error => console.error('Error:', error)): Catches any errors during the request.

Conclusion

In this lesson, we explored CORS, its significance in web development, and how to handle it as a front-end developer. Understanding CORS is crucial for building secure and efficient web applications that interact with various APIs and resources.

Additional Resources