405 POST method not allowed (clarifai)-CodePudding

am trying to use the clarify face detection api on my react app but i keep getting an error POST: 405 method not allowed i have tried going through some solutions here on stack overflow but it seems am using the updated version of clarifai api request method and is not in line with the solutions i have come across can someone please help me out with this am new to this

below is the app.js code

import NavBar from "../components/navbar/NavBar";
import ImageLinkFrom from "../components/imagelinkform/ImageLinkFrom";
import ImageRecognition from "../components/imagerecognition/Imagerecognition";
import Logo from "../components/logo/Logo";
import "./App.css";
import Rank from "../components/rank/Rank";
import { useState } from "react";
import Clarifai from "clarifai";

function App() {
  const [input, setInput] = useState("");
  const [imageurl, setImageurl] = useState("");

  const onInputChange = (e) => {
    setInput(e.target.value);
  };

  const onButtonSubmit = () => {
    setImageurl(input);
    const USER_ID = "myUserId";
    // Your PAT (Personal Access Token) can be found in the portal under Authentification
    const PAT = "myPAT";
    const APP_ID = "myAppId";
    const MODEL_ID = "color-recognition";
    // const MODEL_VERSION_ID = "45fb9a671625463fa646c3523a3087d5";
    // Change this to whatever image URL you want to process
    const IMAGE_URL = "https://samples.clarifai.com/metro-north.jpg";

    const raw = JSON.stringify({
      user_app_id: {
        user_id: USER_ID,
        app_id: APP_ID,
      },
      inputs: [
        {
          data: {
            image: {
              base64: IMAGE_URL,
            },
          },
        },
      ],
    });

    const requestOptions = {
      method: "POST",
      headers: {
        Accept: "application/json",
        Authorization: "Key "   PAT,
      },
      body: raw,
    };
    debugger;

    fetch(
      "https://api.clarifai.com/v2/models/"  
        MODEL_ID  
        "/versions/"  
        "/outputs",
      requestOptions
    )
      .then((response) => response.text())
      .then((result) => console.log(result))
      .catch((error) => console.log("error", error));
  };

  return (
    <div className="App">
      <NavBar />
      <Logo />
      <Rank />
      <ImageLinkFrom
        onInputChange={onInputChange}
        onButtonSubmit={onButtonSubmit}
      />
      <ImageRecognition imageurl={imageurl} />
    </div>
  );
}

export default App;

CodePudding user response：

User, app and version id need to go to the url.

Remove this part from the req body:

user_app_id: {
    user_id: USER_ID,
    app_id: APP_ID,
  },

Change the path:

fetch(
      "https://api.clarifai.com/v2/users/" 
        USER_ID  
        "/apps/"  
        APP_ID  
        "/models/"  
        MODEL_ID  
        "/versions/"  
        MODEL_VERSION_ID  
        "/outputs",
      requestOptions
    )

Or without version (using the latest by default)

fetch(
      "https://api.clarifai.com/v2/users/" 
        USER_ID  
        "/apps/"  
        APP_ID  
        "/models/"  
        MODEL_ID  
        "/outputs",
      requestOptions
    )