What is CORS?
CORS, which stands for Cross-Origin Resource Sharing, is a security feature that web browsers use to prevent web pages from making requests to a domain different from the one that served the original web page. This feature helps to prevent potential security risks such as cross-site request forgery.
Cross-origin resource Sharing (CORS) is a security mechanism that restricts the sharing of resources between different domains. Its main goal is to enforce the same-origin policy, which ensures that only resources loaded from the same origin as the web page can be accessed. As a web developer, it's important to understand how CORS works and how to use it properly to ensure web security. By following best practices and being mindful of web security, you can create web applications that are safe and reliable for users to interact with.
The way we get the CORS error
Before making a fetch request to the server, the browser first sends a preflight request to check if the domain is accessible. If the domain is not accessible, we will encounter a CORS error. If the domain is allowed, the browser sends the actual fetch request to the server, which then returns the result.
The browser cached the preflight result data after the initial request, so it could be used later.
The CORS origin must match the domain or an allowed domain to access server data.
Ecounter CORS in both Frontend & Backend
When you encounter a CORS error, it means that a web page on one domain is trying to make a request (typically an XMLHttpRequest or fetch API request) to a different domain, and the server on that different domain has not included the necessary CORS headers in its response to allow the request from the original domain.
Backend:
With Node.js + Express.js
const cors = require("cors");
const corsOptions = {
origin: "http://example.com",
optionsSuccessStatus: 200, // Some legacy browsers
};
app.use(cors(corsOptions)); // Express middleware
Check out more at CORS Repository
Frontend:
Add the server domain name to the proxy and then add the proxy according to your framework instructions. For example, if you are using CRA then add the proxy on the package.json file.
"proxy": "http://localhost:5000" // Change 5000 with your server port number
What is a Whitelisting domain?
Whitelisting domains typically refers to configuring your server to only accept requests from specified domains. This is a security measure to prevent unauthorized access or requests from domains other than those you explicitly trust.
What is a Preflight check?
The pre-flight check in the context of CORS (Cross-Origin Resource Sharing) refers to a preliminary request that some web browsers make before sending an actual request to a server.
This preflight request is an HTTP OPTIONS request that checks with the server to see whether the actual request. The purpose of the preflight check is to ensure that the server supports the actual request that the client intends to make and to determine whether the actual request is allowed from the client's origin.
The browser sends an HTTP OPTIONS request to the server with the Access-Control-Request-Method and Access-Control-Request-Headers headers, indicating the method and headers that will be used in the subsequent actual request. The server then responds with headers indicating whether the actual request is allowed. If the server responds affirmatively, the browser proceeds with the actual request.
Notes
- The port number may vary in production on different hosting platforms. It is important to thoroughly check everything before pushing the code to production.