Cross-Origin Resource Sharing (CORS) is a mechanism that allows web applications to control which resources can be accessed from other domains. It is an important part of security, especially when it comes to protecting user data. When you understand how CORS works, you can effectively configure it for your application and ensure the security of information.
Basics of CORS
When a browser sends a request to another domain (not the one from which the resource was loaded), it automatically sees this as a cross-domain request. For the request to be successfully executed, the resource hosted on the server must have configured CORS headers that allow this request.
CORS Headers
In response, the server can send the following headers:
-
Access-Control-Allow-Origin: Indicates which domains can access the resource. -
Access-Control-Allow-Methods: A list of HTTP methods that are allowed for the cross-domain request. -
Access-Control-Allow-Headers: Headers that the client can use with the request.
Configuring CORS
To configure CORS, it is important to understand which resources you intend to open for access and who is allowed to obtain these resources.
Example of Node.js Server Configuration
const express = require('express');
const cors = require('cors');
const app = express();
const corsOptions = {
origin: 'https://example.com',
methods: 'GET,POST',
allowedHeaders: 'Content-Type'
};
app.use(cors(corsOptions));
app.get('/', (req, res) => {
res.json({ message: 'CORS configured!' });
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
In this example, we use the cors middleware for Express, which allows requests from the domain https://example.com. This example shows how to allow only GET and POST requests from a specific domain.
Example of Ruby on Rails Server Configuration
class ApplicationController < ActionController::Base
protect_from_forgery with: :exception
before_action :cors_preflight_check
def cors_preflight_check
if request.method == 'OPTIONS'
headers['Access-Control-Allow-Origin'] = '*'
headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
headers['Access-Control-Allow-Headers'] = 'X-Requested-With, X-Prototype-Version'
render text: '', content_type: 'text/plain'
end
end
end
In this example, we add the cors_preflight_check method to handle OPTIONS requests that are sent before the main request. This allows configuring CORS for the entire application. The asterisk (*) indicates that requests from any domain are allowed.
Common CORS Issues
- Blocking requests: This can happen if the server does not correctly configure CORS headers.
- Preflight requests: A preflight request may be sent before the main request to check permissions; if this is not taken into account, the request will be blocked.
- Caching: CORS responses can be cached, affecting the validity of permissions.
Key Points
CORS helps secure your applications by limiting access to resources from external sites. Configuring CORS headers is an important step that can protect your web application from unwanted requests and keep users' personal data safe.
Understanding and properly configuring CORS is an important aspect of web application development that every developer should consider.