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 :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

Developer ❤️ JS

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Easy patterns: Flyweight

JavaScript Array Methods: Explained with Polyfills — forEach, map, filter, reduce & splice

Dockerizing BigCommerce’s Stencil CLI

React Hooks

Asynchronous Behaviour Of JavaScript

Hackerrank Solution in Node JS

@Exploding Frocodes

4 daily use-cases of first-class functions in JavaScript

A Few Lines of JavaScript

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
ADMAT Bandara

ADMAT Bandara

Developer ❤️ JS

More from Medium

Create dynamic dependant dropdowns with Javascript in Rails 6.1.4

FUN…ctions in Javascript

How make you own custom directives in Vue.js ?

How JavaScript Works behind the scenes?