React前端POST/PUTS到Rails 5 API後端

我有一個Rails 5 API，在/ client目錄下運行一個React前端。我試圖通過React前端實現資源的所有CRUD操作。的陣營前端在端口3000上運行，和Rails API後端是我已經安裝/啓用on Rails的CORS端口3001上運行：React前端POST/PUTS到Rails 5 API後端

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

，並在做出反應的package.json我：

"proxy": "http://localhost:3000",

我的軌道路線是：

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

目前，我能成功獲得和使用做出反應顯示狗的列表：

window.fetch('dogs') 
     .then(response => response.json()) 
     .then(json => this.setState({dogs: json})) 
     .catch(error => console.log(error)) 
    }

但是，我希望能夠編輯每隻狗。所以我有一個「狗」下面的陣營組件來處理更新：

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 => console.log(json)) 
     .catch(error => console.log(error)) 
    }

（我將使用響應最終設置狀態，但是隻記錄了它）在Chrome瀏覽器的控制檯，當我提交形式出現以下錯誤：

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…}

但是當我使用郵差提交下列PUT到http://localhost:3000/dogs/1，它成功地更新狗！我究竟做錯了什麼？

{ 
    "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.", 
}

來源

2017-06-24 Hinchy

出於好奇，如果您在confit中間件設置中設置了「origin」*「'，它會起作用嗎？或者可能添加「127.0.0.1：3000」。在您停止服務器以重新加載更改後，務必運行'spring stop'。 – treiff

不幸的是我仍然收到一個錯誤的請求。 – Hinchy

我對於不同的設置（PHP API和前端的React）有同樣的問題。究其原因，錯誤是POST請求，在這種情況下，不同的操作：

發送類型選項的預檢要求
是否成功發送的數據的實際POST請求

你在this blog post可以看到這方面的實際例子。嘗試打開您的Chrome控制檯（網絡標籤）。在那裏你會發現，OPTIONS請求和POST請求以及它們的內容和響應。

郵差有一個特殊的行爲，不發送預檢請求（閱讀它here），這就是爲什麼即使郵遞員不工作，你的瀏覽器測試不起作用。

解決方案

確保您的軌道路由器接受OPTIONS請求，並返回200 OK。

來源

2017-06-24 09:01:19 Gegenwind

React前端POST/PUTS到Rails 5 API後端

回答

相關問題