我正在嘗試為網(wǎng)站創(chuàng)建一個(gè)管理面板(CRUD 操作)。我首先創(chuàng)建 API 端點(diǎn),然后將其托管在我的子域上。我現(xiàn)在正在從該端點(diǎn)獲取數(shù)據(jù)。顯示所有聯(lián)系人 (GET)、單個(gè)聯(lián)系人 (GET) 和添加新聯(lián)系人 (POST) 效果很好,但我在更新聯(lián)系人 (PUT) 方面卡住了好幾天。
預(yù)填表格工作正常。當(dāng)我提交數(shù)據(jù)時(shí),出現(xiàn)以下錯(cuò)誤:
Access to XMLHttpRequest at 'https://api.itisgoodtohave.me/contacts/update.php' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. PUT https://api.itisgoodtohave.me/contacts/update.php net::ERR_FAILED Uncaught (in promise) AxiosError?{message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest,?…}
update.php
:
<?php header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Headers: *"); header("Access-Control-Allow-Methods: *"); include 'DbConnection.php'; $objDb = new DbConnection; $conn = $objDb->connect(); $method = $_SERVER['REQUEST_METHOD']; if ($method = "POST") { $contact = json_decode(file_get_contents('php://input')); $sql = "UPDATE contacts SET name=:name, email=:email, phone=:phone WHERE id=:id"; $stmt = $conn->prepare($sql); $stmt->bindParam(':id', $contact->id); $stmt->bindParam(':name', $contact->name); $stmt->bindParam(':email', $contact->email); $stmt->bindParam(':phone', $contact->phone); if ($stmt->execute()) { $response = ['status' => 1, 'message' => "Contact updated sucessfully."]; } else { $response = ['status' => 0, 'message' => "Could not update contact."]; } echo json_encode($response); } else { echo "some error occured"; }
EditContact.js
import React from 'react'; import axios from 'axios'; import { useState, useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; export default function EditContact() { const [inputs, setInputs] = useState([]) const navigate = useNavigate(); const { id } = useParams(); useEffect(() => { showContact(); }, []) function showContact() { axios.get(`https://api.mywebsite.com/contacts/single_read.php/?id=${id}`) .then(function(response) { setInputs(response.data); }) } const handleChange = (event) => { const name = event.target.name; const value = event.target.value; setInputs(values=> ({...values, [name]: value})); console.log(inputs) } const handleSubmit = (event) => { event.preventDefault(); axios.put('https://api.mywebsite.com/contacts/update.php', inputs) .then(function(response){ console.log(response) navigate('/admin/contacts') }) } return ( <div> <h3>Edit Contact</h3> <form onSubmit={handleSubmit}> <label>Name</label> <input defaultValue={inputs.name} type="text" name="name" onChange={handleChange} /> <br /> <label>Email</label> <input defaultValue={inputs.email} type="text" name="email" onChange={handleChange} /> <br /> <label>Phone</label> <input defaultValue={inputs.phone} type="text" name="phone" onChange={handleChange} /> <br /> <button type="submit">Save</button> </form> </div> ) }
我已經(jīng)嘗試了郵遞員中的每個(gè)端點(diǎn)。所有這些(GET、POST、PUT、DELETE)都在工作。這些條目已在我的數(shù)據(jù)庫(kù)中更新。
經(jīng)過(guò)幾個(gè)小時(shí)的 CORS 谷歌搜索、再次重寫我的代碼等之后,我就是無(wú)法理解。我對(duì)編碼還很陌生,但對(duì)我來(lái)說(shuō),POST 有效但 PUT 無(wú)效似乎不合邏輯(或者我在這里缺少一些基本邏輯)。
如果有人能提出新想法,我會(huì)很高興。我渴望學(xué)習(xí):)
Postman 是一個(gè) HTTP 客戶端,而不是瀏覽器。 CORS 適用于瀏覽器,因此 HTTP 客戶端將忽略這些標(biāo)頭。因此,使用 Postman 調(diào)用 API 時(shí)不會(huì)出現(xiàn)任何問(wèn)題,這是完全有道理的。
錯(cuò)誤消息的重要部分是對(duì)預(yù)檢請(qǐng)求的響應(yīng)未通過(guò)訪問(wèn)控制檢查:它沒有 HTTP 正常狀態(tài)
。 預(yù)檢請(qǐng)求是帶有 OPTIONS 方法的 HTTP 請(qǐng)求。您可以將此視為偵察請(qǐng)求,以檢查是否允許發(fā)出進(jìn)一步的請(qǐng)求 (請(qǐng)參閱 MDN 文檔)。此錯(cuò)誤表明此 OPTIONS 請(qǐng)求的響應(yīng)不是 HTTP 200。此處的解決方案是確保 OPTIONS 請(qǐng)求將導(dǎo)致設(shè)置了所有 CORS 標(biāo)頭的 HTTP 200。