如何让 Axios 使用 Rails 调用 json 响应？答案

【问题标题】：How to make Axios make call for json response with Rails?如何让 Axios 使用 Rails 调用 json 响应？
【发布时间】：2017-09-08 14:28:06
【问题描述】：

我阅读并发现 axios 会将 json 格式调用到一个端点，这似乎不是这里的情况。我的端点如下所示：

  def create
    @form = Form.new(form_params)
    if @form.save
      respond_to do |format|
        format.html { redirect_to(@form, notice: "Form created successfully") }
        format.json { render json: {message: "Form created successfully"} }
      end
    else
      respond_to do |format|
        format.html { render 'new' }
        format.json { render json: {errors: @form.errors}, status: :unprocessable_entity }
      end

    end
  end

我的 axios 调用如下所示：

function instance() {
  return axios.create({
    headers: {'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')},
    'Content-Type':  'application/json',
    responseType: 'json'
  });
}

function post(url, data={}) {
  return instance().post(url, data)
}

这是我拨打电话的方式：

post('/forms', {
          form: this.$data
        }).then((response) => {
          console.log("success");
          console.log(response.data);
        }).catch((error) => {
          console.log("errro");
          console.log(error.response);
        })
    }

如果将/forms 更改为/forms.json 就可以了，有什么提示可以解决这个问题吗？

【问题讨论】：

这里有什么解决方案吗？我想我在这里遇到了同样的问题：stackoverflow.com/questions/47857964/…
我检查了你的问题，但它不相关，但@Evolutio 我添加了一个应该对你有帮助的链接。
添加.json对你有用吗？
不。我认为我的问题是我使用了子域。我编辑我的线程。

标签： ruby-on-rails json axios

【解决方案1】：

正确的标题键应该是 Accept。因此，关于您的问题，它应该适用于：axios.create({headers: {'Accept': 'application/json'}})

除此之外，值得考虑将 axios 的默认标头设置在合适的位置，如下所示：

let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
axios.defaults.headers.common['X-CSRF-Token'] = token
axios.defaults.headers.common['Accept'] = 'application/json'

【讨论】：

【解决方案2】：

我遇到了同样的问题，为了解决这个问题，我将“X-Requested-With”标题键设置为 XMLHttpRequest。

例子：

const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
axios.defaults.headers.common['X-CSRF-Token'] = token;
axios.defaults.headers.common['Accept'] = 'application/json';
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

这可能对你有用；）！

【讨论】：

【解决方案3】：

axios.defaults.headers.common['Authorization'] = authKey;
axios.defaults.headers.common['Accept'] = 'application/json';

现在使用 axios 方法....像邮递员一样添加了标头

【讨论】：