Не удалось заставить Gem-стойку работать на Rails6 - PullRequest
Новая
       29

Не удалось заставить Gem-стойку работать на Rails6

0 голосов
/ 28 марта 2020

Я создал widget show view в своем Rails 6 приложении, которое я хотел бы сделать доступным для сторонних веб-сайтов с помощью iFrame. Для управления CORS я использую rack-cors Gem. Но я не могу заставить его работать. Вот мои настройки:

Модель (# app/models/player_widget.rb): 

class PlayerWidget < ApplicationRecord
  belongs_to :feed, optional: true
end

Контроллер (# app/controllers/embed/player_widgets_controller.rb): 

class Embed::PlayerWidgetsController < ApplicationController
  layout false
  def show
    @widget = PlayerWidget.find params[:id]
    @feed = @widget.feed
  end
end

Вид (# app/views/embed/player_widgets/show.html.erb): 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons+Outlined|Material+Icons" />
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
  </head>
  <body>
    <div class="card card-product">
      <div class="card-header card-header-image" data-header-animation="true">
        <a href="#pablo">
          <%= image_tag url_for(@feed.image)%>
        </a>
      </div>
      <div class="card-body">
        <div class="card-actions text-center">
          <button type="button" class="btn btn-danger btn-link fix-broken-card">
            <i class="material-icons">build</i> Fix Header!
          </button>
          <audio id="testAudio<%= @feed.id %>" src="<%= url_for(@feed.audiofile) %>" type="audio/mpeg"></audio>
          <button id="playAudio<%= @feed.id %>" type="button" class="btn btn-default btn-link" rel="tooltip" data-placement="bottom" title="Play">
            <i id="playIcon<%= @feed.id %>" class="material-icons-outlined">play_circle_outlined</i>
          </button>
          <button id="nextAudio<%= @feed.id %>" type="button" class="btn btn-default btn-link" rel="tooltip" data-placement="bottom" title="Forward">
            <i class="material-icons-outlined">fast_forward</i>
          </button>
        </div>
        <h4 class="card-title">
          <a href="#pablo"><%= @feed.name %></a>
        </h4>
        <div class="card-description">
          <%= @feed.description %>
        </div>
      </div>
      <div class="card-footer">
        <div class="price">
          <h4><%= @feed.short_entries_count %> items</h4>
        </div>
        <div class="stats">
          <p class="card-category">Source: <%= @feed.client.name %></p>
        </div>
      </div>
    </div>
    <%= godfather_js_tag(@feed) %>

  </body>
</html>

Маршрут (# config/routes.erb): 

Rails.application.routes.draw do
  root 'home#index'
  scope "/:locale", locale: /en|nl/ do
    devise_for :users
    get '/:locale' => 'home#index'
    get 'publishers' => 'pages#publishers'
    get 'about' => 'pages#about'
    get 'contact' => 'pages#contact'
    get 'news' => 'pages#news'
    get 'mag_inspiration_day' => 'pages#mag_inspiration_day'
    namespace :embed do
       resources :player_widgets, only: :show, path: "" # -> domain.com/en/embed/1
    end
    namespace :admin do
      root 'dashboard#index'
      resources :audio_uploads
      resources :jingle_uploads
      resources :clients
      resources :feeds
      resources :users
    end
    # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  end
end

Настройка cors (# config/application.rb): 

module RssToSpeech
  ...
  class Application < Rails::Application
    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'
        resource '/embed.js', headers: :any, methods: :get
        resource '/en/embed/1', headers: :any, methods: :get
      end
    end
    ...
  end
end
* 1027 Сценарий * embed. js (# public/embed.js): 
window.onload = function() {

   //Params
   var scriptPram = document.getElementById('load_widget');
   var id = scriptPram.getAttribute('data-page');

   //iFrame
   var iframe = document.createElement('iframe');
   iframe.style.display = "none";
   iframe.src = "embed/" + id;
   document.getElementById('xs-iframe').appendChild(iframe);
};

Сценарий на стороннем веб-сайте (где пример заменен моим собственным доменом): 

<div id="xs-iframe"></div>
<script id="load_widget" src="https://www.example.com/embed.js" data-page="1"></script>

Отчаянная попытка заставить его работать на стороннем веб-сайте с помощью iframe (где пример заменен моим собственным доменом): 

<iframe src="htt://www.example.com/embed/1" width="" height=""></iframe>

В моем представлении iframe я получаю следующую ошибку www.example.com refused to connect., где пример заменен моим собственным доменом. Мой log не показывает никакой ошибки и говорит, что он show-view отрисовал без проблем.

Кто-нибудь знает, что я здесь не так делаю?

...