Setting up CORS to my Rails API
We have started building our project’s front end with Angular 7. Sithum Meegahapola, Our Trainee Software Engineer is working on this task. He recently started to capture data from the API. API is handled by myself and it is a Rails API.
Today he executed his first API calling task with angular and ended up with the following issue.
CORS
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.
Solutions
Sithum Meegahapola already came up with a solution. That is to disable the security in the browser. ( Not a very convenient solution but Okay for the development)
Anyway, the best practice to do is to handle this the rails app level.
1. User rack-cors Gem
2. Bundle install
3. Add the configuration in the Application.rb
Origins can be specified as a string, a regular expression, or as ‘*’ to allow all origins.
A Resource path can be specified as exact string match (/path/to/file.txt) or with a '' wildcard (`/all/files/in/`).
Resource options
- methods (string or array): The HTTP methods allowed for the resource.
- headers (string or array or
:any): The HTTP headers that will be allowed in the CORS resource request. Use:anyto allow for any headers in the actual request. - expose (string or array): The HTTP headers in the resource response can can be exposed to the client.
- credentials (boolean): Sets the
Access-Control-Allow-Credentialsresponse header. - max_age (number): Sets the
Access-Control-Max-Ageresponse header. - if (Proc): If the result of the proc is true, will process the request as a valid CORS request.
- vary (string or array): A list of HTTP headers to add to the ‘Vary’ header
This will solve the problem of CORS.
Cheers, Happy coding !!!
