【问题标题】：React/Rails AJAX POST request returns 404React/Rails AJAX POST 请求返回 404
【发布时间】：2017-01-30 03:29:49
【问题描述】：

我正在尝试在我的 react 组件中连接这个 AJAX POST 请求，以与我的 rails api 控制器进行通信。控制台记录了 404 错误，我似乎无法破解。

react/src/pages/HomeIndex.js

  getCompare() {
    $.ajax({
      url: '/api/sources/compare',
      type: 'POST',
      data: {value: this.state.inputValue, from: this.state.compareFrom, to: this.state.compareTo },
      contentType: 'application/json'
    })
  }

controllers/api/sources_controller.rb

  def compare
    binding.pry
  end

配置/路由

  post '/api/sources/compare', to: 'api/sources#compare'

  namespace :api do
    resources :sources, only: [:index, :compare]
  end

耙路线

api_sources_compare POST /api/sources/compare(.:format) api/sources#compare

更新

我尝试使用几种排列更新路线...

  namespace :api do
    resources :sources, only: [:index] do
      collection do
        post :compare
      end
    end
  end

  namespace :api do
    resources :sources, only: [:index, :compare] do
      collection do
        post :compare
      end
    end
  end

  namespace :api do
    resources :sources, only: [:index] do
      collection do
        resources :compare, only: [:compare]
      end
    end
  end

  namespace :api do
    resources :sources do
      post :compare
    end
  end

...结果都一样。

【问题讨论】：

你能发布你的 Rails 控制台错误日志吗？
我没有收到任何 Rails 控制台错误。 ajax 调用永远不会到达 rails。它正在做出反应并在控制台中返回 404。
那么，请求没有到达带有无效路由的 Rails 服务器？你能检查你的网络选项卡（开发工具）并查看正在发送的 url 吗？
控制台读取POST http://localhost:3000/api/sources/compare 400 (Bad Request)。网络选项卡显示比较 Request URL:http://localhost:3000/api/sources/compare Request Method:POST Status Code:400 Bad Request Remote Address:[::1]:3000 的错误调用
我认为您不能将:compare 设置为“仅”选项。删除第一个post 定义并在resources 中使用collection do ... end

标签： javascript jquery ruby-on-rails ajax reactjs

【解决方案1】：

您可以通过对 AJAX 有效负载进行字符串化来解决此问题，如下所示：

getCompare() {
    let data = JSON.stringify({value: this.state.inputValue, from: this.state.compareFrom, to: this.state.compareTo })
    $.ajax({
      url: '/api/sources/compare',
      type: 'POST',
      data: data,
      contentType: 'application/json'
    })
  }

【讨论】：