Здравствуйте, мне нужно знать, как включить CORS в приложении RAILS REST в OpenShift для Angular

Question

Здравствуйте, мне нужно знать, как включить CORS в приложении RAILS REST в OpenShift для Angular

0

У меня есть небольшой скрипт, который использует Angular для отображения некоторых записей из REST API REST, размещенных в OpenShift, мой public/.htaccess выглядит так:

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

Мой Html/Angular выглядит так:

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

Я не знаю, что произойдет, я использую бесплатный план только для тестирования

bjohnmer 22 июль 2015, в 22:18

Источник

0

Вы проверили руководство CORS . Обычно я бы использовал "*" вместо "*.*"
Alvin K. 22 июль 2015, в 20:28
0

Я использовал * слишком, но ничего не происходит, это сообщение: Cross-Origin Request Blocked: та же политика происхождения запрещает чтение удаленного ресурса по адресу vr-20puntos.rhcloud.com/tables.json . (Причина: предполетный канал CORS не удался).
bjohnmer 22 июль 2015, в 20:33
0

Itried with: Набор заголовков Access-Control-Allow-Origin '*' Набор заголовков Access-Control-Allow-Methods 'POST, GET, OPTIONS' Набор заголовков Access-Control-Allow-Headers 'X-Requested-With, X-Prototype -Версия 'Набор заголовков Access-Control-Max-Age' 1728000 '
bjohnmer 22 июль 2015, в 20:35
0

Вы пробовали JSONP вместо JSON ? Ответ SO Edit . tables.json выглядит в формате JSONP. Вы проанализировали заголовок ответа от OpenShift?
Alvin K. 22 июль 2015, в 20:42
0

Как я могу использовать JSonP с Angular?
bjohnmer 22 июль 2015, в 21:07
0

Я уже узнаю, как использовать JSonP с Angular, но у меня нет ответа
bjohnmer 22 июль 2015, в 21:14
0

Нашел эту проблему с OpenShift . Angular's $ http.jsonp doc
Alvin K. 22 июль 2015, в 21:14
0

Я не могу поверить, что у OpenShift есть такие проблемы с CORS
bjohnmer 22 июль 2015, в 21:34
0

Затем исправьте шахтный тип tables.json 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. 22 июль 2015, в 21:36
0

tables.json - это REST API Rails, я выясню, как это настроить на Rails
bjohnmer 22 июль 2015, в 22:25

Показать ещё 8 комментариев

Теги:

javascript

angularjs

ruby-on-rails

.htaccess

1 ответ

Ещё вопросы

Вы проверили руководство CORS . Обычно я бы использовал "*" вместо "*.*"
Я использовал * слишком, но ничего не происходит, это сообщение: Cross-Origin Request Blocked: та же политика происхождения запрещает чтение удаленного ресурса по адресу vr-20puntos.rhcloud.com/tables.json . (Причина: предполетный канал CORS не удался).
Itried with: Набор заголовков Access-Control-Allow-Origin '*' Набор заголовков Access-Control-Allow-Methods 'POST, GET, OPTIONS' Набор заголовков Access-Control-Allow-Headers 'X-Requested-With, X-Prototype -Версия 'Набор заголовков Access-Control-Max-Age' 1728000 '
Вы пробовали JSONP вместо JSON ? Ответ SO Edit . tables.json выглядит в формате JSONP. Вы проанализировали заголовок ответа от OpenShift?
Как я могу использовать JSonP с Angular?
Я уже узнаю, как использовать JSonP с Angular, но у меня нет ответа
Нашел эту проблему с OpenShift . Angular's $ http.jsonp doc
Я не могу поверить, что у OpenShift есть такие проблемы с CORS
Затем исправьте шахтный тип tables.json 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
tables.json - это REST API Rails, я выясню, как это настроить на Rails

Alvin K. · Accepted Answer · 2015-07-22T21-03-00.000Z

Должно быть в разделе comments но оно слишком долгое. Здесь я беру на себя эту проблему:

Рабочая демонстрация OpenShift, использующая jQuery с обратным вызовом, изображения с сайта flickr.
OpenShift НЕ разрешает использование CORS в своих заголовках (ya, это 2015 год! Пробовал несколько настроек, но не пошел)
Измените свой код tables.json чтобы выполнить вывод http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=? , не может пойти не так, как с большими мальчиками.

Также загляните в консоль и проверьте "заголовки ответов", так как это поможет вам отладить проблему CORS. Удачи