Question

我有一个带有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错误消息。

Answer 1

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

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

Answer 2

我遇到了类似的问题，最终在这里寻找解决方案。不知道这是否可以解决这种特殊情况（我没有使用vuejs），但是我发现，如果在POST和成功的GET重定向后获取空白页，则问题是由于X-XSS-Protection标头引起的，在Rails中默认为1。该标头告诉浏览器不要在试图运行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 个答案: