React.js / PHP / API

Question

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 :)

Answer 1

Postman 是一个 HTTP 客户端，而不是浏览器。 CORS 适用于浏览器，因此 HTTP 客户端将忽略这些标头。因此，使用 Postman 调用 API 时不会出现任何问题，这是完全有道理的。

错误消息的重要部分是对预检请求的响应未通过访问控制检查：它没有 HTTP 正常状态。 预检请求是带有 OPTIONS 方法的 HTTP 请求。您可以将此视为侦察请求，以检查是否允许发出进一步的请求 (请参阅 MDN 文档）。此错误表明此 OPTIONS 请求的响应不是 HTTP 200。此处的解决方案是确保 OPTIONS 请求将导致设置了所有 CORS 标头的 HTTP 200。