嵌入 javascript 表单 500 内部服务器错误

Posted 2023-02-19

【中文标题】嵌入 javascript 表单 500 内部服务器错误

【英文标题】：Embed javascript form 500 Internal Server Error

【发布时间】：2020-05-27 01:15:38

【问题描述】：

上下文 我想为自行车租赁公司 (shops) 提供将客人重定向到我平台上的在线预订流程的选项，以便他们可以让客户预订 bike 或 shop。 （例如，在线预订流程仅适用于他们的商店）

当前步骤 我的第一步是创建一个嵌入式 javascript 表单 (form_availability)，其中shop 网站访问者可以选择arrival、departure 日期，然后查看可用的bike_categories。为了澄清起见，我想为 tthat shop 显示带有到达和离开选项的初始表格。

接近

我创建了一个api/v1/shops（路由、控制器和视图） 我使用 webpacker:vue 创建了一个embed.js 我在自己的应用中实现了<%= javascript_pack_tag "embed" %> 进行测试（网址：http://localhost:3000/en/shops/58/website_integration） 相应店铺的website是http://localhost:3000

问题

这是我第一次这样做，我收到一条错误消息，我不知道如何处理/解决。

控制台

embed.js:23 GET http://localhost:3000/api/v1/shops/http%3A%2F%2Flocalhost%3A3000%2Fen%2Fshops%2F3%2Fwebsite_integration/form_availability 500 (Internal Server Error)

./app/javascript/packs/embed.js @ embed.js:23
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83

type: "NoMethodError", message: "undefined method `url' for ["http://localhost:3000/en/shops/3/website_integration"]:Array", backtrace: Array(76)

type: "NoMethodError"
message: "undefined method `url' for ["http://localhost:3000/en/shops/3/website_integration"]:Array"
backtrace: (76) ["/Users/robtuinte/code/Tumble25/camping_pms/app/models/shop.rb:41:in `block in <class:Shop>'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…/active_record/relation.rb:288:in `instance_exec'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ib/active_record/relation.rb:288:in `_exec_scope'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…e_record/scoping/named.rb:186:in `block in scope'", "/Users/robtuinte/code/Tumble25/camping_pms/app/con…/v1/shops_controller.rb:16:in `form_availability'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…metal/basic_implicit_render.rb:6:in `send_action'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…stract_controller/base.rb:194:in `process_action'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…troller/metal/rendering.rb:30:in `process_action'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ller/callbacks.rb:42:in `block in process_action'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ctive_support/callbacks.rb:132:in `run_callbacks'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ct_controller/callbacks.rb:41:in `process_action'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…controller/metal/rescue.rb:22:in `process_action'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…nstrumentation.rb:34:in `block in process_action'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ort/notifications.rb:168:in `block in instrument'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…/notifications/instrumenter.rb:23:in `instrument'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…tive_support/notifications.rb:168:in `instrument'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…r/metal/instrumentation.rb:32:in `process_action'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…r/metal/params_wrapper.rb:256:in `process_action'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ties/controller_runtime.rb:24:in `process_action'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…/lib/abstract_controller/base.rb:134:in `process'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge….2.3/lib/action_view/rendering.rb:32:in `process'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…/lib/action_controller/metal.rb:191:in `dispatch'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…/lib/action_controller/metal.rb:252:in `dispatch'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…on_dispatch/routing/route_set.rb:52:in `dispatch'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ction_dispatch/routing/route_set.rb:34:in `serve'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…dispatch/journey/router.rb:52:in `block in serve'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ib/action_dispatch/journey/router.rb:35:in `each'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…b/action_dispatch/journey/router.rb:35:in `serve'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ction_dispatch/routing/route_set.rb:840:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…n-js-3.5.1/lib/i18n/js/middleware.rb:14:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…1.2.8/lib/warden/manager.rb:36:in `block in call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…/warden-1.2.8/lib/warden/manager.rb:34:in `catch'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…s/warden-1.2.8/lib/warden/manager.rb:34:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ck-2.0.7/lib/rack/tempfile_reaper.rb:15:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…5.0/gems/rack-2.0.7/lib/rack/etag.rb:25:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ck-2.0.7/lib/rack/conditional_get.rb:25:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…5.0/gems/rack-2.0.7/lib/rack/head.rb:12:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…atch/http/content_security_policy.rb:18:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…/lib/rack/session/abstract/id.rb:232:in `context'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…0.7/lib/rack/session/abstract/id.rb:226:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…tion_dispatch/middleware/cookies.rb:670:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge….2.3/lib/active_record/migration.rb:559:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…tch/middleware/callbacks.rb:28:in `block in call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…active_support/callbacks.rb:98:in `run_callbacks'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ion_dispatch/middleware/callbacks.rb:26:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…tion_dispatch/middleware/executor.rb:14:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…patch/middleware/debug_exceptions.rb:61:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…0/lib/web_console/middleware.rb:135:in `call_app'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…b/web_console/middleware.rb:30:in `block in call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…3.7.0/lib/web_console/middleware.rb:20:in `catch'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…-3.7.0/lib/web_console/middleware.rb:20:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…spatch/middleware/show_exceptions.rb:33:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…s-5.2.3/lib/rails/rack/logger.rb:38:in `call_app'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge….3/lib/rails/rack/logger.rb:26:in `block in call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…support/tagged_logging.rb:71:in `block in tagged'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…b/active_support/tagged_logging.rb:28:in `tagged'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…b/active_support/tagged_logging.rb:71:in `tagged'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…lties-5.2.3/lib/rails/rack/logger.rb:26:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…/lib/sprockets/rails/quiet_assets.rb:13:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ion_dispatch/middleware/remote_ip.rb:81:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge….5.0/lib/request_store/middleware.rb:19:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…on_dispatch/middleware/request_id.rb:27:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ck-2.0.7/lib/rack/method_override.rb:22:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…/gems/rack-2.0.7/lib/rack/runtime.rb:22:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…e/strategy/local_cache_middleware.rb:29:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…tion_dispatch/middleware/executor.rb:14:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ction_dispatch/middleware/static.rb:127:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ems/rack-2.0.7/lib/rack/sendfile.rb:111:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…acker/dev_server_proxy.rb:29:in `perform_request'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…s/rack-proxy-0.6.5/lib/rack/proxy.rb:57:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…/railties-5.2.3/lib/rails/engine.rb:524:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…uma-4.1.0/lib/puma/configuration.rb:228:in `call'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…-4.1.0/lib/puma/server.rb:664:in `handle_request'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…-4.1.0/lib/puma/server.rb:467:in `process_client'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…ma-4.1.0/lib/puma/server.rb:328:in `block in run'", "/Users/robtuinte/.rbenv/versions/2.5.3/lib/ruby/ge…uma/thread_pool.rb:135:in `block in spawn_thread'"]
__proto__:

日志

Started GET "/api/v1/shops/http%3A%2F%2Flocalhost%3A3000%2Fen%2Fshops%2F3%2Fwebsite_integration/form_availability" for ::1 at 2020-02-18 10:24:21 +0100
Processing by Api::V1::ShopsController#form_availability as JSON
  Parameters: "id"=>"http://localhost:3000/en/shops/3/website_integration"
Completed 500 Internal Server Error in 2ms (Views: 0.7ms | ActiveRecord: 0.0ms)

代码

路线

namespace :api, defaults:  format: :json  do
    namespace :v1 do
      resources :shops, only: [:show] do
        get :form_availability , on: :member
      end
    end
  end

controller/api/v1/shops_controller.rb

class Api::V1::ShopsController < Api::V1::BaseController
  def form_availability
    binding.pry
    @shop = Shop.by_url(params[:id])
    render "shops/form_availability"
  end
end

型号

class Shop < ApplicationRecord
  has_many :bike_categories, dependent: :destroy
  has_many :bikes, through: :bike_categories
  has_many :reservations, dependent: :destroy

  def self.by_url(url)
    binding.pry
    uri = url.split("?").first
    uri.sub!(/\/$/, '')

    where(website: uri)
  end
end

class Reservation < ApplicationRecord
  belongs_to :shop
  belongs_to :bike
end

class Bike < ApplicationRecord
  belongs_to :bike_category
  has_many :reservations, dependent: :destroy
end

class BikeCategory < ApplicationRecord
  belongs_to :shop
  has_many :bikes, dependent: :destroy
end

javascript/packs/embed.js

let url = window.location.href


fetch(`http://localhost:3000/api/v1/shops/$encodeURIComponent(url)/form_availability`,
  headers: accept: 'application/json'
)
.then(response => response.json())
.then(data => console.log(data))```

views/api/vi/shop/form_availability.json.jbuilder

json.extract！ @shop, :id, :name, :slug, :description, :street, :street_number, :zipcode, :city, :country, :email, :phone, :website, :vat_number, :currency, :photo, :test_modus , :default_vat, :price_notation, :paytime, :billing_id, :default_shop_language, :default_age_table, :inv_pay_deadline

【参考方案1】：

您看到此错误的原因是服务器以 404 响应，并且这是以 html 而非 JSON 格式传送的。

您将在此处找到一些获取 API 请求的 JSON 错误消息的指南（可能有助于更好的错误处理和调试）：

Need to return JSON-formatted 404 error in Rails

在这种特殊情况下，您返回 404 的问题在于，fetch 调用中的 URL 组合不正确。这里有两个问题：

有一个错字 - http://localhost:3000/api/vi/... - 它应该是您路线中定义的 v1，而不是 vi。

javascript 中的 URI 架构组成不正确 - 您可以通过执行 rails routes 查看每个路由定义的所有可用路由。您应该能够在输出中找到正确的 URI 模式 - 在您的情况下为 /api/v1/dummies/:id/form_availability(.:format)。

因此，您的 embed.js 应该如下所示：

let url = window.location.href


fetch(`http://localhost:3000/api/v1/shops/$encodeURIComponent(url)/form_availability`,
  headers: accept: 'application/json'
)
.then(response => response.json())
.then(data => console.log(data)) 

对您在Shop 模型中定义的类方法self.by_url(url) 的注释。执行此操作的标准方法是使用范围 (https://guides.rubyonrails.org/active_record_querying.html#scopes)。

所以在你的模型中它应该是这样的，而不是类方法：

scope :by_url, ->(url)  where(website: url.split('?').first.sub(/\/$/, '')) 

【讨论】：

感谢 Sebastian，我解决了这些问题（请参阅问题）并因此获得了 500 error。