向在Postman中工作的REST API發出PUT請求，但在使用Fetch時不起作用

Question

我正在嘗試編寫代碼，以便可以使用獲取api通過網站更改api數據-這是代碼

 const url = 'https://oafc.herokuapp.com/api/players'; const nameDropdown = document.getElementById('nameDropdown'); const nameInput = document.getElementById('name'); const assistsInput = document.getElementById('assists'); const goalsInput = document.getElementById('goals'); const editPlayerSubmit = document.getElementById('editPlayerSubmit'); //Fill select with players fill inputs function getPlayers(){ fetch(url) .then((res) => res.json()) .then((data) => { //Fill Select for(i = 0; i< data.length; i++){ createOption(data[i].name , i); }; function createOption(val , num){ let elem = document.createElement("option"); elem.innerHTML = val; elem.value = num; nameDropdown.appendChild(elem); } }) } //Change inputs on name change nameDropdown.addEventListener('change', () => { fetch('https://oafc.herokuapp.com/api/players') .then((res) => res.json()) .then((data) => { let selected = nameDropdown.value; let goals = data[selected].goals; let name = data[selected].name; let assists = data[selected].assists; let id = data[selected]._id; console.log(id); goalsInput.value = goals; nameInput.value = name; assistsInput.value = assists; }) }); getPlayers(); //When edit player submit btn is pressed editPlayerSubmit.addEventListener('click', () => { fetch(url) .then((res) => res.json()) .then((data) => { urlWithId = `https://oafc.herokuapp.com/api/players/${data[nameDropdown.value]._id}`; let bodyData = { name: nameInput.value, goals: goalsInput.value, asists: assistsInput.value }; fetch(urlWithId, { method: 'PUT', headers: { "Content-Type": "application/json" }, body: JSON.stringify(bodyData) }) .then(response => response.json()); }) });

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Site Title</title> <!-- Stylesheets --> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="editPlayer"> <h1>Edit Player</h1> <select id="nameDropdown"></select> <br> Name: <input type="text" id="name"> <br> Goals: <input type="number" id="goals"> <br> Assists: <input type="number" id="assists"> <br> <button id="editPlayerSubmit">Submit</button> </div> <!-- Scripts --> <script src="js/script.js"></script> </body> </html>

我自己開發了API，並且PUT請求正在通過郵遞員進行處理，因此我知道我的CORS設置都是正確的。 GET請求正在工作，所以我想我可能已經把自己編寫的代碼弄亂了，這就是為什么它不起作用

Answer 1

我懂了

Failed to load https://oafc.herokuapp.com/api/players/5b0f171cacc1580004d5c07c: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

當我運行您的代碼段時。

查看此答案以配置您的heroku應用程序。

向在Postman中工作的REST API發出PUT請求，但在使用Fetch時不起作用

問題描述

1 個解決方案

解決方案1
0 已采納 2018-05-31 10:22:42

向在Postman中工作的REST API發出PUT請求，但在使用Fetch時不起作用

問題描述

1 個解決方案

解決方案1 0 已采納 2018-05-31 10:22:42

解決方案1
0 已采納 2018-05-31 10:22:42