React.js / PHP / API
Ich versuche, ein Admin-Panel (CRUD-Operationen) für eine Website zu erstellen. Ich erstelle zuerst den API-Endpunkt und hoste ihn dann auf meiner Subdomain. Ich erhalte jetzt Daten von diesem Endpunkt. Das Anzeigen aller Kontakte (GET), einzelner Kontakte (GET) und das Hinzufügen neuer Kontakte (POST) funktioniert großartig, aber ich stecke tagelang beim Aktualisieren von Kontakten (PUT) fest.
Vorab ausgefüllte Formulare funktionieren einwandfrei. Wenn ich die Daten übermittle, erhalte ich die folgende Fehlermeldung:
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>
)
}
Ich habe jeden Endpunkt in Postman ausprobiert. Alle (GET, POST, PUT, DELETE) funktionieren. Diese Einträge wurden in meiner Datenbank aktualisiert.
Nachdem ich stundenlang nach CORS gegoogelt, meinen Code erneut umgeschrieben usw. habe, komme ich einfach nicht dahinter. Ich bin ziemlich neu im Codieren, aber es erscheint mir unlogisch, dass POST funktioniert, PUT jedoch nicht (oder mir fehlt hier eine grundlegende Logik).
Ich würde mich freuen, wenn jemand neue Ideen vorschlagen kann. Ich bin lernbegierig :)
