A simple way to add CORs headers to legacy apps:
But first, some definitions of what CORs and CORs preflight requests are:
"Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any other origins (domain, scheme, or port) than its own from which a browser should permit loading of 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."
Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
"CORS does not protect your server. CORS attempts to protect your users by telling browsers what the restrictions should be on sharing responses with other domains. Normally this kind of sharing is utterly forbidden, so CORS is a way to poke a hole in the browser's normal security policy. These holes should be as small as possible, so always check the HTTP_ORIGIN against some kind of internal list."
Reference: https://stackoverflow.com/questions/8719276/cross-origin-request-headerscors-with-php-headers
CORs preflight request:
"A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood and a server is aware using specific methods and headers."
Reference: https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
"The Access-Control-Allow-Headers response header is used in response to a preflight request which includes the Access-Control-Request-Headers to indicate which HTTP headers can be used during the actual request."
Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers
Note, developer tools will not show CORs preflight requests.
Now to the code:
function addCORSHeaders()
{
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
// cors preflight check; doesn't care about content, just headers and status
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, PATCH, OPTIONS');
header('Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept, Origin, Authorization');
// cache of cors preflight check; max varies by browser; some only 10min, some 24hr
header('Access-Control-Max-Age: 86400');
header('Content-Length: 0');
header('Content-Type: text/plain');
// HTTP/1.1 or HTTP/1.0 or HTTPS/2.0 or etc
header($_SERVER['SERVER_PROTOCOL'] . ' 200 OK');
exit();
}
// if can, allow just your domain.com or allow just subdomains *.domains.com
// but if have multiple shared apps/domains, * allow from anywhere
header('Access-Control-Allow-Origin: *');
}
Add a function/method call to addCORSHeaders() to your middleware, or before your output.
Note, If your app has authentication, don't forget to allow OPTIONS as unauthenticated, like your login page.
You can check the network response to see the added headers in browsers developer tools.
But as developer tools do not show CORs preflight requests, you may have to log access or trace using xdebug.
-End of Document-
Thanks for reading
