时间戳

首页 > 解决方案 > 如何使用 JavaScript Fetch 发布到 Rails 应用程序

javascript - 如何使用 JavaScript Fetch 发布到 Rails 应用程序

问题描述

我正在构建一个需要发布到 Rails 应用程序的 Chrome 扩展程序。

我可以使用 Fetch 发送请求，但是当 Rails 处理请求时 JSON 对象不正确。我的控制器返回错误：

NoMethodError (undefined method permit' for #<String:0x00007ff83b5a36e8>)

日志说数据对象如下所示：

{"highlight"=>"{\"text\":\"hello world!\",\"url\":\"helloworld.com\"}"}

数据对象应如下所示：

{"highlight"=>{"text"=>"hello world!", "url"=>"helloworld.com"}}

出于某种原因，Rails 将请求处理为带有引号的字符串，而不是散列。我不知道如何从 Fetch 传递它，这样它就不会那样做。

这是 JavaScript 代码：

function captureHighlight(selection, tab) {
  const highlight = {
      text: selection.selectionText, 
      url: selection.pageUrl
  }

  return highlight;
}

async function postHighlight(highlight) {
  let formData = new FormData();
  formData.append('highlight', JSON.stringify(highlight));

  const response = await fetch('http://localhost:3000/highlights', {
    method: 'POST',
    body: formData,
  });

  console.log(response);
}

标签： javascriptruby-on-railsrubygoogle-chrome-extensionfetch

解决方案

导轨.xhr？方法检查X-Requested-With标头是否包含该XMLHttpRequest值。只需将其设置在标题中，如下所示：

const response = await fetch('http://localhost:3000/highlights', {
  method: 'POST',
  body: formData,
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  },
});

Rails 将检测请求xhr并以适当的格式返回响应。

推荐阅读