Hello, I need to know how to enable CORS in a RAILS REST app at OpenShift for Angular

Question

I have a little script that uses Angular to list some records from a Rails API REST hosted in OpenShift, my public/.htaccess looks like this:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods "GET, POST, OPTIONS, DELETE, PUT, PATCH"
Header add Access-Control-Allow-Headers "Content-Type, Authorization, Content-Length, X-Requested-With"

PassengerFriendlyErrorPages off

My Html/Angular looks like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Test Angular from Shared Hosting to OpenShift RAILS API REST</title>
        <link rel="icon" href="images/apple-touch-icon.png">
        <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-3.3.5/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
        <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
        <!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
        <script src="js/ie-emulation-modes-warning.js"></script>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body ng-app="MyApp">
      <div ng-controller="PostsCtrl">
        <div ng-repeat="post in posts">
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                  <img alt="100%x200" data-src="holder.js/100%x200" style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRlYWU3NWZmODIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNGVhZTc1ZmY4MiI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OC44NDk5OTg0NzQxMjExIiB5PSIxMDUuNyI+MjQyeDIwMDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true">
                  <div class="caption">
                    <h3>{{post.name}}</h3>
                    <p>{{post.body}}</p>
                    <p><a role="button" class="btn btn-primary" href="#">Button</a> <a role="button" class="btn btn-default" href="#">Button</a></p>
                  </div>
                </div>
              </div>
        </div>
      </div>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.js"></script>



      <script>
        var app = angular.module("MyApp", ['ngResource']);

        app.factory("Post", function($resource) {
          return $resource("http://vr-20puntos.rhcloud.com/tables.json");
        });
        app.controller("PostsCtrl", function($scope, Post) {
          Post.query(function(data) {
            $scope.posts = data;
          });
        });

      </script>
    </body>

</html>

I don't know what happen, I'm using the Free Plan just for testing

Have you checked the [CORS guide](http://enable-cors.org/server_apache.html). Generally I'd use `"*"` instead of `"*.*"` — Alvin K., Jul 22 '15 at 20:28
I used * too ut nothing happens, this is the message: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://vr-20puntos.rhcloud.com/tables.json. (Reason: CORS preflight channel did not succeed). — bjohnmer, Jul 22 '15 at 20:33
Itried with: Header set Access-Control-Allow-Origin '*' Header set Access-Control-Allow-Methods 'POST, GET, OPTIONS' Header set Access-Control-Allow-Headers 'X-Requested-With, X-Prototype-Version' Header set Access-Control-Max-Age '1728000' — bjohnmer, Jul 22 '15 at 20:35
Have you tried a `JSONP` instead of `JSON`? The [SO answer](http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain) **Edit** The `tables.json` looks like in JSONP format. Have you analysed the response header from OpenShift? — Alvin K., Jul 22 '15 at 20:42
I already find out how to use JSonP with Angular, but I have no response — bjohnmer, Jul 22 '15 at 21:14
Found this [issue with OpenShift](http://stackoverflow.com/questions/23978344/openshift-access-control-allow-origin-set-by-server-for-get-request-disappears). Angular's [$http.jsonp doc](https://docs.angularjs.org/api/ng/service/$http#jsonp) — Alvin K., Jul 22 '15 at 21:14
I cannot belive that OpenShift have this kind of CORS issues — bjohnmer, Jul 22 '15 at 21:34
Next, fix the `tables.json` mine-type, `Refused to execute script from 'http://vr-20puntos.rhcloud.com/tables.json?callback=jQuery190006028701923787594_1437600826432&_=1437600826433' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled` — Alvin K., Jul 22 '15 at 21:36
tables.json is a Rails API REST, I'll fid out how to configure this on Rails — bjohnmer, Jul 22 '15 at 22:25

score 1 · Accepted Answer · answered Jul 22 '15 at 22:06

Should be in comments section but it has gotten too long. Here's my take on this issue:

Working demo from OpenShift that uses jQuery with callback, images from flickr site.
OpenShift DOES NOT allow CORS enabled in its headers (ya, it is 2015! Tried a few configuration but no go)
Modify your tables.json code to follow the output of http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?, can't go wrong with the big boys.

Also look into the console and check the 'response headers' since that will help you debug the CORS issue. Good luck

Thank you I'll try this out – bjohnmer Jul 22 '15 at 22:46 — bjohnmer, Jul 22 '15 at 22:46

Hello, I need to know how to enable CORS in a RAILS REST app at OpenShift for Angular

1 Answers1