Cross-Origin Resource Sharing
Internet Engineering
Spring 2024@1995parham
What is CORS?
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.
CORS also relies on a mechanism by which browsers make a preflight request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.
CORS Policy
The Cross-Origin Resource Sharing standard works by adding new HTTP headers that let servers describe which origins are permitted to read that information from a web browser.
Usage
For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request resources from the same origin the application was loaded from unless the response from other origins includes the right CORS headers.
Example
An example of a cross-origin request, the front-end JavaScript code served from https://domain-a.com uses XMLHttpRequest to make a request for https://domain-b.com/data.json.
Another Example
For example, suppose web content at https://foo.example wishes to invoke content on domain https://bar.other. Code of this sort might be used in JavaScript deployed on foo.example:
const xhr = new XMLHttpRequest();
const url = "https://bar.other/resources/public-data/";
xhr.open("GET", url);
xhr.onreadystatechange = someHandler;
xhr.send();
This operation performs a simple exchange between the client and the server, using CORS headers to handle the privileges:
Let's look at what the browser will send to the server in this case:
GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Origin: https://foo.example
The request header of note is Origin, which shows that the invocation is coming from https://foo.example. Now let's see how the server responds:
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml
[…XML Data…]
In response, the server returns a Access-Control-Allow-Origin header with Access-Control-Allow-Origin: *, which means that the resource can be accessed by any origin.
CORS Error
The CORS behavior, commonly termed as CORS error, is a mechanism to restrict users from accessing shared resources. This is not an error but a security measure to secure users or the website which you are accessing from a potential security breach.
Fixing CORS Error
When you are developing an application, you can fix CORS error in Front-end or Back-end.
Proxy Server (Frontend)
When you are developing a Front-end application, you cannot change the responses from the server that you are requesting to. So you need to make http requests with help of a third party application like a proxy server. In this method you send CORS requests to your proxy server, the proxy server sends a non-CORS request to the requested server, then it gets a non-CORS response from that server and sends us a CORS response.
Flow
Example
For example you can create a proxy server in React application like this:
{
"name": "application",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8080"
}
See a full example implemented by amirhnajfiz cors fix example .
CORS Middleware (Backend)
When you are developing a Back-end service, you need to set the CORS headers in requests and responses. To do this, we usually use a Middleware. Every request needs to pass from this middleware, and it will be converted to a CORS request.
Example
In Fiber framework of Golang, there is middleware called CORS. We use it in our application instance so all requests will be CORS request.
import (
"github.com/gofiber/fiber/v2"
"github.com/gofiber/fiber/v2/middleware/cors"
)
func NewApp() *fiber.App {
// create a new app
app := fiber.New()
// Default config
app.Use(cors.New())
return app
}
See the full documentation of Fiber CORS middleware .
