title: React frontend POST / PUTS to Rails 5 API backend
body: <p>I've got a Rails  5 API with a React frontend running in a /client directory. I'm trying to implement all of the CRUD actions for a resource via the React frontend. 
  The React frontend is running on port 3000, and the Rails API backend is running on port 3001. I have CORS installed / enabled on Rails:</p>
  
  <pre><code>Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
      origins 'localhost:3001'
  
      resource '*',
        headers: :any,
        methods: [:get, :post, :put, :patch, :delete, :options, :head]
    end
  end
  </code></pre>
  
  <p>and in the React package.json I have:</p>
  
  <pre><code>"proxy": "http://localhost:3000",
  </code></pre>
  
  <p>My rails routes are:</p>
  
  <pre><code>Prefix Verb   URI Pattern         Controller#Action
    dogs GET    /dogs(.:format)     dogs#index
         POST   /dogs(.:format)     dogs#create
     dog GET    /dogs/:id(.:format) dogs#show
         PATCH  /dogs/:id(.:format) dogs#update
         PUT    /dogs/:id(.:format) dogs#update
         DELETE /dogs/:id(.:format) dogs#destroy
  </code></pre>
  
  <p>Current, I can successfully get and display a list of Dogs in React using:</p>
  
  <pre><code>window.fetch('dogs')
        .then(response =&gt; response.json())
        .then(json =&gt; this.setState({dogs: json}))
        .catch(error =&gt; console.log(error))
    }
  </code></pre>
  
  <p>However, I want to be able to edit each dog. So I have the following in a 'Dog' React component to handle updates:</p>
  
  <pre><code>handleSubmit(event) {
      event.preventDefault()
      let url = `dogs/${this.state.id}`
      let data = {
        dog: {
          id: this.state.id,
          name: this.state.name,
          age: this.state.age,
          sex: this.state.sex,
          description: this.state.description
        }
      }
  
      let updateDog = {
        method: 'PUT',
        body: data
      }
      fetch(url, updateDog)
        .then(json =&gt; console.log(json))
        .catch(error =&gt; console.log(error))
    }
  </code></pre>
  
  <p>(I'll use the response to set state eventually, however just logging it for now)
  In Chrome's console, when I submit the form I get the following error:</p>
  
  <pre><code>PUT http://localhost:3000/dogs/1 400 (Bad Request)
  Dog.jsx:61 Response {type: "cors", url: "http://localhost:3000/dogs/1", redirected: false, status: 400, ok: false…}
  </code></pre>
  
  <p>But when I use Postman to submit the following PUT to <a href="http://localhost:3000/dogs/1" rel="nofollow noreferrer">http://localhost:3000/dogs/1</a>, it successfully updates the dog! What am I doing wrong?</p>
  
  <pre><code>{
    "id": 1,
    "name": "Lord Barkington",
    "age": 7,
    "sex": "M",
    "description": "Pieces of Eight jolly boat mutiny me cable spike Sail ho ho draught reef sails grapple schooner topsail Yellow Jack.",
  }
  </code></pre>