如何让Axios使用Rails调用json响应?

时间:2017-04-12 17:14:51

标签: ruby-on-rails json axios

我读到并发现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,是否可以解决此问题?

3 个答案:

答案 0 :(得分:0)

正确的标题密钥应为“接受”。因此,参考您的问题,它应适用于: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'

答案 1 :(得分:0)

我遇到了同样的问题,为解决该问题,我将“ 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';

这可能对您有用;)!

答案 2 :(得分:0)

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

现在使用 axios 方法....header 已经像 postman 一样添加