POST后如何修复空白页答案

【问题标题】：How to fix blank page after POSTPOST后如何修复空白页
【发布时间】：2019-10-21 12:15:18
【问题描述】：

我有一个带有 VueJS 2.0 和 Webpacker 的 Rails 6 应用程序。一切正常，直到我使用 Rails 通过 POST 提交表单。我得到一个空白页面，但如果我刷新，一切都会再次正常。

我尝试使用$mount("#app") 无济于事

我的 application.js 看起来像：

 require("@rails/ujs").start()
 import Vue from "vue/dist/vue.esm";
 import ExampleComponent from "../components/example_component.vue";

 document.addEventListener('DOMContentLoaded', () => {
  var app = new Vue({
   el: '#app',
   components: {
     ExampleComponent
   },
  })
 });

我的 application.html.erb 看起来像：

<%= javascript_pack_tag 'application' %>
<div id='app'>
  <%= yield %>
</div><!--/#app-->

我的 Rails 控制器返回以下内容：

Started PATCH "/books/fsaddsdsf-1cb1c13b8fc6"
Processing by BooksController#update as HTML
Redirected to http://localhost:3000/books

Started GET "/books/fsaddsdsf-1cb1c13b8fc6"...
Processing by BooksController#show as HTML

我的 rails 表单只是标准的 <%= form_with %> 表单，打开了 local: true。它们在没有 javascript 的情况下也能完美运行。

控制台中没有任何 Rails 或 VueJS 错误消息，这很奇怪。

【问题讨论】：

检查你的 Rails 服务器日志：它会指出发生了什么。
我们确实需要您的 Rails 路由处理程序代码。你只返回一个json响应吗？还是某种观点（我不熟悉 Rails 术语）？
@JoshBrody，Rails 服务器日志只返回一个正常的 POST，然后重定向到 show.html.erb 视图。它只是从默认的 rails scaffold 命令生成的。
@GONG，这不是 JSON 响应，表单 POST，然后被重定向到 HTML 页面。页面空白肯定是javascripts的错误，如果我阻止Javascript，表单提交工作正常。
你能告诉我们 POST 动作并返回 js 响应吗？基本上提交表单后，它会加载你返回的js格式。我不是 Vue 大师，我只是觉得你在 POST 操作后返回的 js 文件有问题

标签： javascript ruby-on-rails ruby vue.js webpack

【解决方案1】：

我遇到了类似的问题，最终在这里寻找解决方案。不确定这是否能解决这个特殊情况（我没有使用 vuejs），但我发现如果我在 POST 和成功的 GET 重定向后得到一个空白页面，问题是由于 X-XSS-Protection 标头，默认为1 在 Rails 中。该标头告诉浏览器不要在尝试运行在 POST 中提交的相同脚本的页面上加载任何内容。那么也许您的一些 javascript 正在请求中发布？

在我的情况下，我有一个允许 iframe 嵌入的 CMS，但是当有人更新包含 iframe 的页面时，它在服务器上显示成功，但无法在浏览器中加载。我找到的解决方法是：

class PagesController < ApplicationController

  before_filter :disable_xss_protection

  ...

  private

  def disable_xss_protection
    # allows a page to display after an iframe or javascript was submitted in the post
    response.headers['X-XSS-Protection'] = "0"
  end

end

警告：禁用跨站点脚本保护是危险的，因此我只会在您有 100% 保护以防止恶意用户访问控制器的情况下使用此方法。

【讨论】：

【解决方案2】：

您可以使用axios 提交表单。但是为了防止默认表单提交与整页刷新，您需要在提交按钮中添加 .prevent 修饰符

<button @click.prevent="methodCall">Submit</button>

【讨论】：

最好在表单中添加@submit.prevent。
它的作用几乎相同。
它没有。单击阻止就像按钮单击一样。提交防止像表单提交这样的行为。例如，默认的 HTML5 表单验证（必需的输入）将得到很好的处理。此外，如果您有复杂的表单，您团队中的每个人都可以更轻松地找到提交处理程序。
OP 没有询问客户端表单验证。即使是这种情况，我也不会屏住呼吸进行 HTML5 表单验证，而是选择 vee-validate。您可以在表单中的任何按钮中使用 type=“submit” 使其成为提交按钮。然而它违背了使用 vue 的目的不是它。
那么，为什么还需要一个表单来防止点击呢？一切都与可用性和可访问性有关（屏幕阅读器会告诉您，何时提交表单。但会忽略处理提交的非本地方式。）。您需要尽可能使用默认浏览器行为。我很清楚 OP 是Vue 的新手。而且你已经在教他一个坏习惯了。