Categories
Cross-Origin Resource Sharing
CORS
Usually web browsers forbids cross-domain requests, due the same origin security policy. Cross-origin resource sharing (CORS) is a technique that allow servers to serve resources to permitted origin domains by adding HTTP headers to the server who are respected from web browsers.
Examples of practical use of CORS are cross-domain AJAX requests, or using fonts hosted on a subdomain.
Browser support
CORS is supported by Chrome 3+, Firefox 3.5+, IE 10+, Safari 4+, Opera 12+
Allow access from all domains
To allow access from all origins (domains), the server should send next response header:
// Raw header Access-Control-Allow-Origin: * // How to send the response header with PHP header("Access-Control-Allow-Origin: *"); // How to send the response header with Apache (.htaccess) Header set Access-Control-Allow-Origin "*" // How to send the response header with Nginx add_header 'Access-Control-Allow-Origin' '*'; // How to send the response header with Express.js app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); next(); });
Allow access from specific domain
To allow access from specific origin (domain), the server should send next response header:
// Raw header Access-Control-Allow-Origin https://www.domain.com // How to send the response header with PHP header("Access-Control-Allow-Origin: https://www.example.org"); // How to send the response header with Apache (.htaccess) Header set Access-Control-Allow-Origin "https://zinoui.com" // How to send the response header with Nginx add_header 'Access-Control-Allow-Origin' 'https://zinoui.com'; // How to send the response header with Express.js app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "https://plus.google.com"); next(); });
Request headers
- Origin
The Origin header shows the server name where the cross-domain/preflight request originates.
- Access-Control-Request-Method
The Access-Control-Request-Method header is sent to the server as part of the preflight request and informs it about the HTTP method that will be used in the actual request.
- Access-Control-Request-Headers
The Access-Control-Request-Headers header is sent to the server as part of the preflight request and informs it about headers that will be used in the actual request.
Response headers
- Access-Control-Allow-Origin
The Access-Control-Allow-Origin header indicates whether a resource can be shared.
- Access-Control-Allow-Credentials
The Access-Control-Allow-Credentials header indicates whether the response to request can be exposed when the credentials flag is
true
. - Access-Control-Expose-Headers
The Access-Control-Expose-Headers response header brings information about headers that browsers could allow accessing.
- Access-Control-Max-Age
The Access-Control-Max-Age header indicates how much time, the result of a preflight request, can be cached.
- Access-Control-Allow-Methods
The Access-Control-Allow-Methods header is returned by the server in a response to a preflight request and informs the browser about the HTTP methods that can be used in the actual request.
- Access-Control-Allow-Headers
The Access-Control-Allow-Headers header is returned by the server in a response to a preflight request and informs the browser about the HTTP headers that can be used in the actual request.
- Cross Domain AJAX Request
- Cross Domain AJAX Upload
- Cross-Domain Iframe Resize
- Progress Indicator for AJAX Request
- Crawlable AJAX Applications
If you have questions about cross-origin resource sharing, drop a comment below. Thanks so much for reading!
Subscribe to our newsletter
Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.
0 Comments
Comments are closed