Receive error when using Clarifai API. I need advise

Question

I am trying to develop a web application to face recognition using API from Clarifai. Everything is fine until I use fetch when I face an error message "POST https://api.clarifai.com/v2/models/face-detection/outputs net::ERR_ABORTED 400 (Bad Request)". error message

Can somebody help me a clue which one of my coding is wrong?

Note: I use react, API Clarifai for face-detection, and https://samples.clarifai.com/metro-north.jpg for the sample.

The syntax I built:

import './App.css';


import React, { Component } from 'react';
//import Clarifai from 'clarifai';


import Navigation from './components/Navigation/Navigation.js';
import Logo from './components/Logo/Logo.js';
import Rank from './components/Rank/Rank.js';
import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm.js';

import ParticlesBG from 'particles-bg';

const returnClarifaiRequestOptions = (imageUrl) => {
  // Your PAT (Personal Access Token) can be found in the Account's Security section
  const PAT = 'xxx';`your text`
  // Specify the correct user_id/app_id pairings
  // Since you're making inferences outside your app's scope
  const USER_ID = 'ekasandiyunan-1975';       
  const APP_ID = 'my-first-application-r4hcl';
  // Change these to whatever model and image URL you want to use
  const MODEL_ID = 'face-detection';
  //const MODEL_VERSION_ID = '6dc7e46bc9124c5c8824be4822abe105';    
  const IMAGE_URL = imageUrl;

  const raw = JSON.stringify({
      "user_app_id": {
          "user_id": USER_ID,
          "app_id": APP_ID
      },
      "inputs": [
          {
              "data": {
                  "image": {
                      "url": IMAGE_URL
                  }
              }
          }
      ]
  });  
  
  const requestOptions = {
    mode: 'no-cors',
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Authorization': 'Key ' + PAT
    },
    body: raw
  };

  return requestOptions
}

class App extends Component {
  constructor() {
    super();
    this.state={
      input: ''
    }
  }

  onInputChange = (event) => {
    console.log(event.target.value);
  }

  onButtonSubmit = () => {
    this.setState({imageUrl: this.state.input})

    fetch("https://api.clarifai.com/v2/models/" + 'face-detection' + "/outputs", returnClarifaiRequestOptions(this.state.input))
        .then(response => response.json())
        .then(response => {
          console.log('Hi', response)
          if (response) {
            fetch('http://localhost:3000/image', {
              method: 'put',
              headers: {'Content-Type': 'application/json'},
              body: JSON.stringify({
                id: this.state.user.id
              })
            })
              .then(response => response.json())
              .then(count => {
                this.setState(Object.assign(this.state.user, {entries: count}))
              })
          }
        })
        .catch(err => console.log(err));`
  }

  render() {
    return (
      <div className="Apps">
        <ParticlesBG color='#F9F9F8' num={200} type="cobweb" bg={true} />
        <Navigation />
        <Logo />
        <Rank />
        <ImageLinkForm 
          onInputChange={this.onInputChange} 
          onButtonSubmit={this.onButtonSubmit}
        />
      </div>
    );
  }
}

export default App;
///finish
````



I try to clear a cookies, check DNS, etc, all related to how solve the issue related to error message, but no progress.

Answer 1

The reason why you got a bad request it's because of using [mode: 'no-cors'] as it severely limits what you can do with the response.

Best Approach: The backend proxy is the best solution as it avoids CORS issues and keeps your API keys secure.

Kindly find docs regarding CORS here.