Empty or malformed authorisation header. Please provide an API key or session token. 400 bad request error

Question

I am building a food detection application and I have literally tried everything to remove this error! I get a 400 bad request error when I paste a url.

This is the status code which shows the error:

> {"status":{"code":11102,"description":"Invalid request","details":"Empty or malformed authorization header. Please provide an API key or session token.","req_id":"7d399e162bb943f5848960862ccedbe9"}}

My App.js is this (have not included the import part and the api key):

      const app = new Clarifai.App({
          apiKey: "MY API KEY",
        });
        
        const particleOptions = {
          particles: {
            number: {
              value: 100,
              density: {
                enable: true,
                value_area: 800,
              },
            },
          },
        };
        
        class App extends Component {
          constructor() {
            super();
            this.state = {
              input: "",
              imageUrl: "",
              showModal: false,
              foodIngredients: [],
            };
          }
    
      onInputChange = (event) => {
        this.setState({ input: event.target.value });
      };
    
         onButtonSubmit = () => {
                this.setState({ imageUrl: this.state.input, showModal: true });
                app.models
                  .predict(
                    {
                      model_id: " bd367be194cf45149e75f01d59f77ba7",
                      version_id: "dfebc169854e429086aceb8368662641",
                    },
                    this.state.input
                  )
                  .then((response) => {
                    console.log("hi", response);
                    if (response) {
                      fetch("http://localhost:3000/image/", {
                        method: "put",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({
                          url: this.state.input,
                        }),
                      })
                        .then((response) => response.json())
                        .then((response) => {
                          //response ingredient array
                          if (response.length <= 0) {
                            return this.setState({
                              input: "",
                              foodIngredients: [response],
                            });
                          } else {
                            this.setState({
                              input: "",
                              foodIngredients: response,
                            });
                          }
                        });
                    }
                  })
                  .catch((err) => {
                    console.log(err);
                    this.setState({ imageUrl: "" });
                  });
              };

  onModalShow = () => {
    this.setState({ showModal: false, foodIngredients: [] });
  };

  render() {
    const { input, imageURL, showModal, foodIngredients } = this.state;
    return (
      <div className="App">
        <Particles className="particles" params={particleOptions} />
        <div>
          <Logo />
          <ImageLinkForm
            urlInput={this.onInputChange}
            text={input}
            buttonClick={this.onButtonSubmit}
          />
          <FoodRecognition
            url={imageURL}
            show={showModal}
            canceled={this.onModalShow}
            foodIngredients={foodIngredients}
          />
        </div>
      </div>
    );
  }
}

export default App;

Please let me know if I need to add or change anything.

UPDATE I get a new error when I change the .predict

app.models
      .predict(
        Clarifai.FOOD_MODEL,
        // {
        //   model_id: " bd367be194cf45149e75f01d59f77ba7",
        //   version_id: "dfebc169854e429086aceb8368662641",
        // },
        this.state.input
      )

Error:

App.js:55 PUT http://localhost:3000/image/ 404 (Not Found)
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Answer 1

• You are using the deprecated Javascript REST SDK: https://github.com/Clarifai/clarifai-javascript

• Make sure to use the NodeJS gRPC client: https://github.com/Clarifai/clarifai-nodejs-grpc or directly call the Clarifai API: https://docs.clarifai.com/api-guide/data/create-get-update-delete (see "Javascript (REST)" snippets)