Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the resource originated.
By default, it's not possible to make HTTP requests using Javascript from a source domain that is different from the called endpoint. For example, this means that it's not possible to call the URL http://socialengine.ipragmatech.com/api/user from a domain http://ipragmatech.com.This limitation has been introduced for security reasons: in fact, without this protection, a malicious javascript code could get info from another site without noticing the user. However, even if the reason for this limitation is clear, sometimes we need to call anyway something that is not hosted on our site.
Why is CORS important?
CORS communication allows you to overtake the problem by defining some rules that make the request more "secure". CORS is a W3C spec that allows cross-domain communication from the browser. By building on top of the XMLHttpRequest object, CORS allows developers to work with the same idioms as same-domain requests. The use-case for CORS is simple. Imagine the site http://socialengine.ipragmatech.com has some data that the site http://ipragmatech.com wants to access. This type of request traditionally wouldn’t be allowed under the browser’s same origin policy. However, by supporting CORS requests, http://socialengine.ipragmatech.com can add a few special response headers that allow http://ipragmatech.com to access the data.
How does it work
CORS is a simple "check" based on HEADERS between the caller and the server. The browser (client) adds the current domain into the header of the request using the key Origin. The server checks that this value matches with the allowed domains specified in the attribute, answering with another HEADER information named Access-Control-Allow-Origin If both keys have the same values, you have the data, otherwise you'll get an error. The screenshot below shows the headers:
Set Access-Control-Allow-Origin (CORS) headers in htaccess
This section lists the HTTP response headers that servers send back for access control requests as defined by the Cross-Origin Resource Sharing specification. In order to use it, you need to set the correct headers in your
.htaccess, add headers like these.
######################
## Handling Options for the CORS
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [L,R=204]
###################
Add custom headers
Header set X-Content-Type-Options "nosniff"
Header set X-XSS-Protection "1; mode=block"
# Always set these headers for CORS.
Header always set Access-Control-Max-Age 1728000
Header always set Access-Control-Allow-Origin: "*"
Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
Header always set Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,C$
Header always set Access-Control-Allow-Credentials true
Access-Control-Allow-Origin
The origin parameter specifies a URI that may access the resource. The browser must enforce this. For requests without credentials, For example, to allow http://socialengine.ipragmatech.com to access the resource, you can specify:Header Set Access-Control-Allow-Origin "http://socialengine.ipragmatech.com"The server may specify "*" as a wildcard, thereby allowing any origin to access the resource.
Header Set Access-Control-Allow-Origin "*"
Access-Control-Allow-Methods
The Access-Control-Allow-Methods header specifies the method or methods allowed when accessing the resource. This is used in response to a request.Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
Access-Control-Allow-Headers
The Access-Control-Allow-Headers header is used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,C$"
Access-Control-Allow-Credentials
The Access-Control-Allow-Credentials header Indicates whether or not the response to the request can be exposed when the credentials flag is true. When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials.Access-Control-Allow-Credentials: true
Access-Control-Max-Age
The Access-Control-Max-Age header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.Access-Control-Max-Age: 1728000
Conclusion
If you want to implement Cross-origin resource sharing (CORS) mechanism that allows restricted resources on a web page to be requested from another domain outside the domain then implementation of the CORS are very easy steps as described above. You can edit the .htaccess file in your own way to make it more attractive as per your requirements.Posted from my blog with : https://www.ipragmatech.com/enable-cors-using-htaccess/