CORS (Cross-Origin Resource Sharing)

CORS stands for Cross-Origin Resource Sharing. It is a mechanism that allows web browsers to make cross-origin HTTP requests securely. In the context of web development, an origin is defined as the combination of the protocol (e.g., HTTP or HTTPS), domain, and port from which a resource is being requested.

 

By default, web browsers enforce a security policy called the Same-Origin Policy, which restricts scripts running in a web page from making requests to a different origin. This policy is in place to prevent malicious websites from accessing sensitive information or performing actions on behalf of a user without their consent.

 

However, there are legitimate scenarios where a web page hosted on one origin may need to make requests to a different origin. For example, if a web page served from "https://www.example.com" wants to fetch data from an API hosted on "https://api.example.com", it would be considered a cross-origin request. CORS enables controlled access to resources on different origins while maintaining security.

 

Here's how CORS works:

1. Client-side Request: When a web page sends a cross-origin request, the browser includes an additional HTTP header called "Origin." This header specifies the origin of the requesting page.
2. Server Response: The server receiving the request can determine if it allows cross-origin requests by including specific CORS headers in the response. These headers are:
   • Access-Control-Allow-Origin: Specifies which origins are allowed to access the resource. It can be set to a specific origin (e.g., "https://www.example.com") or "*" to allow access from any origin. The server can also send multiple origins separated by commas.
   • Access-Control-Allow-Methods: Specifies the HTTP methods (such as GET, POST, PUT, DELETE, etc.) that are allowed for the resource.
   • Access-Control-Allow-Headers: Indicates which HTTP headers are allowed to be included in the actual request.
   • Access-Control-Allow-Credentials: If the server allows credentials (such as cookies or authorization headers) to be included in the request, this header should be set to "true".
   • Access-Control-Expose-Headers: Lists the headers that the response can expose to the requesting page.
3. Browser Evaluation: When the browser receives the server's response, it checks the CORS headers. If the server allows cross-origin access (specified by the Access-Control-Allow-Origin header), the browser proceeds with delivering the response to the requesting page. Otherwise, it blocks the response and prevents the web page from accessing the resource.

It's important to note that CORS is enforced by web browsers. It is a security mechanism designed to protect users and ensure that requests from one origin cannot access sensitive data from another origin without proper authorization.

Developers can configure CORS behavior on the server-side by setting the appropriate response headers. Different web frameworks and server technologies provide ways to enable CORS support, allowing developers to define the allowed origins, methods, and headers.

By implementing CORS, web developers can enable controlled cross-origin access to their resources, allowing for more flexible and interactive web applications while maintaining the security and privacy of users.

 

https://evan-moon.github.io/2020/05/21/about-cors/

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Cross-Origin Resource Sharing (CORS) - HTTP | MDN