Find solution
How can I enable cors on openshift?

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

  • 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

  • Answer:

    Should be in comments section but it has gotten too long. Here's my take on this issue: Working http://app-alkhoo.rhcloud.com/json.html 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

bjohnmer at Stack Overflow Visit the source

Was this solution helpful to you?

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.