Setting up CORS to my Rails API

We have started building our project’s front end with Angular 7. , 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

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 :any to 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-Credentials response header.
  • max_age (number): Sets the Access-Control-Max-Age response 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 !!!

References

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

https://www.rubydoc.info/gems/rack-cors/0.4.0

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store